Applying customizations
Motion can be customized so that transitions match the desired tone and style of a brand. For example, a productivity app might take a more reserved approach with standard easing and short durations to allow users to focus on the tasks at hand. By contrast, a more playful app might express its brand more noticeably and freely with oscillation, arc motion paths, emphasized elevation, and staggers.
Speed
Speed can be adjusted by changing a transition’s duration (time elapsed) and easing (acceleration and deceleration).
Standard easing with a short duration has a direct, functional style. Transitions with emphasized easing and long durations have a more stylized appearance.
Motion paths
If elements in a transition move diagonally, the path that they follow can be linear or arced. Linear motion paths have a simple and functional style, while arc motion paths create a more emphasized and dramatic style.
Specs
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.
Oscillation
By default, transitions come to a definitive rest upon reaching the end point. When oscillation is added, the transition path overshoots its endpoint at least once and then reverses course to return to the endpoint. Oscillation can be used to express a more playful and energetic transition style.
Transition patterns
UI elements that include a container commonly use the container transform pattern. However, these transitions can be stylized by applying the shared axis pattern instead. This can give the transition a more subtle tone.
Specs
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.
Elevation
By default, background content remains static during a container transform transition. Elevation can be emphasized by animating the scale of background content. This customization gives transitions a more dramatic appearance by emphasizing the distance between foreground and background content.
Specs
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.
Stagger
Stagger creates a stylized cascade effect that focuses attention very briefly on each item in a group. By default, incoming elements are animated as a single group to create a simple, functional style. Stagger can be added to a group of incoming elements by applying short delays to each element in the group.
Stagger can be used to emphasize an element. For example, a FAB can stand out by finishing its entrance after all other animations have stopped.