Sequencing
Sequencing refers to the order in which the different parts of an animation occur. A good sequence helps users understand what has changed on a screen, if elements were added or removed, and adds focus to anything important about the following interaction.
Element types
UI elements in a sequence are categorized as outgoing, incoming, or persistent. In the demo tool, the persistent element (container) is blue; the outgoing element...
UI elements in a sequence are categorized as outgoing, incoming, or persistent.
- Outgoing elements exit the screen
- Incoming elements enter the screen
- Persistent elements start and end on screen
In the demo tool, the persistent element (container) is blue; the outgoing element (list item content) is red; and the incoming element (details page content) is green.
Interactive tool: Drag the pink playhead to scrub through the timeline and inspect the motion design. Click on any row in the timeline to see more details. Use the tabs above the timeline to switch between related specs.
Fade types
To achieve sequencing, the following three fading types can be used: A fade creates a smooth sequence between elements that fully overlap each other, such...
To achieve sequencing, the following three fading types can be used:
- Fade
- Cross-fade
- Fade through
Fade
A fade creates a smooth sequence between elements that fully overlap each other, such as photos inside of a card or another container. An element fades in (appears) or fades out (disappears) to show or hide the element behind it.
Cross-fade
A cross-fade transitions two elements simultaneously: one fades into view while the other fades out. During a portion of the sequence, both elements are shown together, along with anything that is behind them. This overlap of partially transparent elements can result in messy and distracting frames.
Fade through
A fade through entails an outgoing element fading out entirely before an incoming element fades in. A fade through can be used to minimize overlapping partially transparent elements.
Peak velocity
All fading types are coordinated with the peak velocity of a transition. Peak velocity refers to the fastest moment in a transition. Fades and cross-fades...
All fading types are coordinated with the peak velocity of a transition. Peak velocity refers to the fastest moment in a transition.
Fades and cross-fades are applied when a transition is at peak velocity. This sequencing hides the unwanted effect of partially transparent overlapping frames during the transition.
Interactive tool: Drag the pink playhead to scrub through the timeline and inspect the motion design. Click on any row in the timeline to see more details. Use the tabs above the timeline to switch between related specs.
With a fade through, outgoing elements finish fading out at the point of peak velocity; then, incoming elements fade in. This sequencing hides the empty frame during the transition when both the outgoing card content and incoming details page content are transparent, making for a more seamless transition.
Interactive tool: Drag the pink playhead to scrub through the timeline and inspect the motion design. Click on any row in the timeline to see more details. Use the tabs above the timeline to switch between related specs.
Transformation
Transformation describes specific animations of a transitioning element. For example, changing size, position, and opacity are types of transformations that an element or group of elements can undergo.
Simple transformations
Simple transitions involve seamlessly transforming the properties that change from one state to the next.
Simple transitions involve seamlessly transforming the properties that change from one state to the next.
Complex transformations
Complex layout changes use a shared transformation to create smooth transitions from one layout to the next. Elements are grouped together and transform as a...
Complex layout changes use a 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. This avoids multiple transformations overlapping and competing for attention.
Grouped elements are sequenced with one of three fading types: fade, cross-fade, or fade through.
Transitions with animated containers
When a group of elements are contained by clearly defined borders during a transition, such as a card or set of dividers, the container transforms....
When a group of elements are contained by clearly defined borders during a transition, such as a card or set of dividers, the container transforms. The element group maintains its aspect ratio, scaling by width to fit and pin to top of the container.
Transitions without animated containers
When an element group is not contained by clearly defined borders, a shared transformation can create a smooth transition. For example, a pair of icons...
When an element group is not contained by clearly defined borders, 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.
Focal elements
A focal element in a transition is a persistent element that is significant to the overall hierarchy of elements in a transition. Like animated containers, focal elements enhance continuity by seamlessly transforming in appearance.
Focal element conflicts
Some transitions will place a focal element in the path of other elements. In these cases, avoid using a focal element and apply a fade...
Some transitions will place a focal element in the path of other elements. In these cases, avoid using a focal element and apply a fade instead.