The motion system

The motion system is a set of transition patterns that can help users understand and navigate an app.

beta

Guidance in beta reflects the latest Material Design insights. It may significantly change to support new research and code.

Learn more or send us your feedback.

Developer documentation

Platform

Status

Android

Available

iOS

Not planned

Web

Not planned

Flutter

Available


Transition patterns

Material Design’s motion system is comprised of four patterns for transitioning between components or full-screen views. The patterns are designed to help users navigate and understand an app by reinforcing relationships between UI elements.

The transition patterns are:

  • Container transform
  • Shared axis
  • Fade through
  • Fade

Selecting a pattern

Consider the following when determining which transition pattern is appropriate for a given use case: Is a persistent container part of the transition? Containers are...

Read More

Consider the following when determining which transition pattern is appropriate for a given use case:

Persistent containers

Is a persistent container part of the transition?

Containers are shapes used to represent enclosed areas, such as buttons, lists, card surfaces. If there’s a container that’s a persistent element in the transition, choose the container transform pattern.

The container transform pattern is for persistent containers, such as a FAB that transitions into a sheet, or a list item that transitions into a detail page.

Relationships

Is there a spatial or navigational relationship between UI elements?

If the elements in a transition do not have a persistent container, there may be a spatial relationship to emphasize, such as elements in a vertical or horizontal layout. Or, there might be a navigational relationship between elements, such as moving between peers or between levels in an app. If a spatial or navigational relationship exists between elements, choose the shared axis pattern.

The shared axis pattern can be applied to UI elements with a spatial or navigational relationship, such as forward and backward navigation in an onboarding flow.

When a relationship between elements is insignificant or does not exist, the fade through pattern is better suited.

The fade through pattern can be applied to UI elements without a strong relationship to each other, such as destinations in the bottom navigation.

Entering and exiting

Does a UI element enter or exit the screen?

Oftentimes a UI element simply needs to enter or exit the screen. For entering or exiting elements, the fade pattern is best suited.

The fade pattern can be applied to UI elements that enter or exit the screen, such as dialogs.


Container transform

The container transform pattern is designed for transitions between UI elements that include a container. This pattern creates a visible connection between two UI elements.

By seamlessly transforming one element into another, the relationship of the two elements is reinforced. For example, when a card transforms into a detail page, the user’s focus is directed to identify that the detail page is an expanded version of the card.

Examples of the container transform (in regular timing and slow motion):

  1. A card into a detail page
  2. A list item into a detail page
  3. A FAB into a detail page
  4. A search bar into expanded search

The container transform pattern can also be applied to transitions that occupy only part of the screen, and do not expand into a full-screen view.

Examples of the container transform:

  1. A FAB into a menu
  2. A FAB into a media player
  3. A FAB into a sheet
  4. A chip into an expanded chip

A desktop container transform pattern facilitates the transition of a list item into the body of an email.

Specs

The container acts as a persistent element while its dimensions, position, and shape animate in tandem during the transition. The contents of the container are...

Read More

Container transform

The container acts as a persistent element while its dimensions, position, and shape animate in tandem during the transition. The contents of the container are pinned to the container’s top edge and scale to match the container’s width as it transforms. Additionally, a fade is used to sequence outgoing and incoming elements.

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.

Container transform: fade through variant

Using a fade to sequence elements might expose overlapping and partially transparent frames during the transition. In these cases, a fade through can be used to minimize the appearance of overlapping frames. With a fade through, outgoing elements completely fade out before incoming elements fade in.

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.


Shared axis

The shared axis pattern is used for transitions between UI elements that have a spatial or navigational relationship. This pattern uses a shared transformation on the x, y, or z axis to reinforce the relationship between elements.

For example, when tapping next in an onboarding flow, both the outgoing and incoming elements transform horizontally in unison. By moving in the same direction, elements are perceived to be related to each other.

Examples of the shared axis pattern:

  1. An onboarding flow transitions along the x-axis
  2. A stepper transitions along the y-axis
  3. A parent-child navigation transitions along the z-axis

X-axis

X-axis transitions reinforce horizontal layouts or peer navigational relationships amongst UI elements. Elements transform in unison along the x-axis.

A shared x-axis transition is used to reinforce the horizontal layout of a slider component.

A shared x-axis transition applied to a chip that transitions from suggested text into a text bubble.

Y-axis

Y-axis transitions reinforce a vertical layout or a peer navigational relationship between UI elements. Elements transform in unison along the y-axis. For example, moving between steps in a vertical stepper.

A shared y-axis transition used to indicate forward and backward peer navigation through a recipe using a vertical stepper.

Z-axis

Z-axis transitions indicate moving one level upward or downward in an app’s hierarchy. The elevation of each element transforms in unison, moving forward or backward along the z-axis.

A shared z-axis transition indicates a parent-child level transition as the user navigates from the settings button to the settings page.

Specs

In the shared axis pattern, outgoing and incoming elements share the same horizontal (x-axis), vertical (y-axis), or elevation (z-axis) transformation. Additionally, a fade through sequences...

Read More

Shared axis

In the shared axis pattern, outgoing and incoming elements share the same horizontal (x-axis), vertical (y-axis), or elevation (z-axis) transformation. Additionally, a fade through sequences the outgoing and incoming elements.

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.

Shared axis: fade variant

If the default shared axis transition creates an unwanted flashing effect when elements fade through, use a fade to create a more seamless transition. A fade can work well particularly when using the z-axis transition pattern.

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 through

The fade through pattern is used for transitions between UI elements that do not have a strong relationship to each other.

For example, transitions triggered by tapping a bottom navigation bar use the fade through pattern. The fade through is the best choice because destinations in the bottom navigation are often grouped into major tasks that may not relate to one another. Additionally, the fade through pattern does not mislead users to think they can swipe horizontally between destinations.

Examples of the fade through pattern:

  1. Tapping destinations in a bottom navigation bar
  2. Tapping a refresh icon
  3. Tapping an account switcher

Icons in an app bar using a fade through transition to exit and enter

Chips using a fade through as content changes

Specs

In a fade through transition, outgoing elements first fade out. Next, incoming elements fade in while scaling in overall size from 92% to 100%. The...

Read More

Fade through

In a fade through transition, outgoing elements first fade out. Next, incoming elements fade in while scaling in overall size from 92% to 100%. The element scaling starts at 92%, rather than 0%, to avoid drawing excessive attention to the transition. The scale animation is applied only to incoming elements in order to emphasize new content over the old.

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

The fade pattern is used for UI elements that enter or exit within the bounds of the screen, such as a dialog that fades in and out of view from the center of a screen.

Examples of the fade pattern:

  1. Dialog
  2. Menu
  3. Snackbar
  4. FAB

Specs

When entering, elements use a fade and scale in overall size from 80% to 100%. The scale animation starts at 80%, rather than 0%, to...

Read More

Fade

When entering, elements use a fade and scale in overall size from 80% to 100%. The scale animation starts at 80%, rather than 0%, to avoid drawing excessive attention to the transition. When exiting, elements simply fade out. The scale animation is only applied to entering elements. This places emphasis on new content (entering elements) over old content (exiting elements).

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: scale anchor point variant

By default, entering elements scale from their center point when fading in. In a variation on the default behavior, the scale anchor point can be repositioned from the center of an element to another location within the element.

For example, when an overflow icon (the parent component) triggers a menu (the child component), the menu’s anchor point can be positioned at the top right corner of the menu so that it appears to scale from the overflow icon during a transition. This variation visually unites the two components.

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.