Choreography

Transition choreography is a coordinated sequence of motion that maintains user focus as the interface adapts.


Sequencing

Animation sequences

An animation sequence refers to the order in which different parts of an animation appear, start moving, and stop moving. A good sequence makes it...

Read More

An animation sequence refers to the order in which different parts of an animation appear, start moving, and stop moving.

A good sequence makes it easy to understand what has changed about a screen, if any elements were added or removed, and what’s important to know about the next interaction.

Simple sequences

Simple sequences animate all elements in unison, such as the expansion of a bottom sheet.

Read More

Simple sequences animate all elements in unison, such as the expansion of a bottom sheet.

This bottom sheet slides up using standard easing to expose additional options. All animation details, including color and position, start and stop in sync.

Complex sequences

Complex transitions, like viewing details from a contact list, require more elaborate sequences. This can be done by dividing the transition into two parts, at...

Read More

Complex transitions, like viewing details from a contact list, require more elaborate sequences. This can be done by dividing the transition into two parts, at the point when elements move the fastest. Classify each of the elements into four categories: incoming, outgoing, persistent or static.

  • First part of transition: Outgoing elements disappear
  • Second part of transition: Incoming elements appear
  • Entire transition: Persistent elements transform

Peak velocity for the Standard curve is at 30% of the overall duration. Outgoing elements disappear over 90ms, and incoming elements appear over 210ms.

  • The persistent curve shows the easing of persistent elements.
  • The outgoing curve shows the easing of outgoing elements.
  • The incoming curve shows the easing of incoming elements.

Transformation

Simple transformations

Simple transitions involve tweening all properties that change from one state to the next.

Read More

Simple transitions involve tweening all properties that change from one state to the next.

This simple transformation shows the switch component tweening its position and color by moving from left to right and fading from white to purple.

Complex transformations

Complex layout changes use shared transformation to create smooth transitions from one layout to the next. Elements are grouped together and transform as a single...

Read More

Complex layout changes use shared transformation to create smooth transitions from one layout to the next. Elements are grouped together and transform as a single unit, rather than animating independently, avoiding multiple transformations that overlap and compete for attention.

Grouped elements are changed with a fade through transition. Grouped elements disappear and then reappear with their final appearance.

Do.

Minimize the number of elements that move independently. Transformation of the group directs attention to provide continuity, while individual elements fade in or out.

Don’t.

Don’t animate many elements in relation to each other. Individual movements compete for attention and divide focus.

Don’t.

Don’t let the UI jump and shift abruptly, which can make it difficult to stay focused.

Transitions with animated containers

When a group of elements is contained by clearly defined borders during a transition, such as a card or set of dividers, the container transforms....

Read More

When a group of elements is contained by clearly defined borders during a transition, such as a card or set of dividers, the container transforms. The group of elements within maintains its aspect ratio, scaling to fit the container’s width. The group can be clipped by the container’s bottom edge.

Continuity is created by animating the group in unison with its container. The group scales to match the container’s width. When expanded, elements aren’t clipped, except at the bottom edge.

Transitions without animated containers

When a group of elements is not contained by clearly defined borders, or its container doesn’t animate, a shared transformation can create a smooth transition....

Read More

When a group of elements is not contained by clearly defined borders, or its container doesn’t animate, a shared transformation can create a smooth transition. For example, a pair of icons within a floating action button can rotate in unison to create continuity.

The icons transition using clockwise rotation.

Incoming and outgoing elements move up and down as a group, in tandem with the vertical stepper.


Using a focal element

A transition may include a focal element, which is a persistent element significant to the hierarchy that can be tweened. Like animated containers, focal elements enhance continuity by seamlessly transforming their appearance.

The header image is a focal element, remaining visible from start to finish as it transforms between collapsed and expanded layouts.

Focal element conflicts

Some transitions place a focal element in the path of other elements. In these cases, avoid using a focal element and apply the default transition,...

Read More

Some transitions place a focal element in the path of other elements. In these cases, avoid using a focal element and apply the default transition, allowing elements to disappear and then reappear.

Caution.

When focal elements overlap with other elements in motion it can create a disorganized transition.

Do.

To simplify overlapping motion, consider substituting a focal element with a fade through transition.

Grouping focal elements

When a transitions have both a focal element and an animated container which can’t move in unison, divide the transition elements into groups. For example,...

Read More

When a transitions have both a focal element and an animated container which can’t move in unison, divide the transition elements into groups.

For example, a card transition can group together the motion of:

  • A collapsed layout with a focal element
  • An expanded layout with a container (such as a card)

Do.

Group elements together so they move as little as possible within their container. This collapsed layout is grouped with a focal element (the thumbnail image), while the expanded layout is grouped with a container (a card).

Don’t.

Avoid groupings in which elements move within their container. Elements aren’t grouped within the card during the transition, and the card clips the expanded layout on all four sides rather than just at the bottom.