Navigation transitions

Navigational transitions occur when users move between screens, such as from a home screen to a detail screen.


About navigation transitions

Navigation and motion

Navigation transitions use motion to guide users between two screens in your app. They help users orient themselves by expressing your app's hierarchy, using movement...

Navigation transitions use motion to guide users between two screens in your app. They help users orient themselves by expressing your app's hierarchy, using movement to indicate how elements are related to one another.

For example, when an element expands to fill the entire screen, the act of expansion expresses that the new screen is a child element. The screen from which it expanded is its parent element.


Hierarchy

Hierarchical transitions move users one level upwards or downwards through an app's hierarchy, while peer transitions move users between siblings (screens of equal hierarchy).

Hierarchical transitions move users one level upwards or downwards through an app's hierarchy, while peer transitions move users between siblings (screens of equal hierarchy).


Hierarchical transitions

Hierarchical transitions reflect when users move one level up, or down, in an app. Screens at adjacent levels to one another have a parent and child relationship with one another, in which the parent is placed at a higher level of hierarchy than its child.

Parent-child transitions

From a parent screen, an embedded child element lifts up on touch and expands in place, using a container transform transition pattern. The motion both draws focus to the child screen (which is the destination of the interaction), while reinforcing the relationship between parent and child screens.

A parent-to-child transition
Message previews in this email app lift and expand in place to reveal the full message.

Peer transitions

Peer transitions occur between screens at the same level of hierarchy.

Sibling transitions occur between peers that share a parent, while top-level peer transitions are only used for switching between primary destinations.

Sibling transitions

Screens that share the same parent (such as photos in an album, sections of a profile, or steps in a flow) move in unison to...

Screens that share the same parent (such as photos in an album, sections of a profile, or steps in a flow) move in unison to reinforce their relationship to one another. The peer screen slides in from the one side, while its sibling moves off screen in the opposite direction.

Tabs indicate they are related by sitting at the same elevation and moving together.
This travel app uses tabs to allow switching between three different types of trips.

Top-level transitions

At the top level of an app, destinations are often grouped into major tasks (and the tasks may not relate to one another). These screens...

At the top level of an app, destinations are often grouped into major tasks (and the tasks may not relate to one another). These screens transition in place using a fade through transition pattern.

Destinations in a bottom navigation bar transition in place.
The top-level destinations of this photo app transition appropriately, given that the destinations aren’t strongly related to one another.

Up next