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
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.
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.
Shared axis
The shared axis pattern is used for transitions between UI elements that have a spatial or navigational relationship. This pattern uses a
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.
X-axis
X-axis transitions reinforce horizontal layouts or peer navigational relationships amongst UI elements. Elements transform in unison along the x-axis.
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.
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.
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.
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.