Patterns-Navigational transitions¶

Navigational transitions are movements between states in an app, such as from a high-level view to a detailed view.
Most, but not all, transitions are hierarchical in nature.
These moments should appropriately reflect the user’s journey through each state of an app.

Hierarchy and elevation¶

When elements lift up and expand, the elevation change indicates a shift in focus from parent to child elements.
Sibling transitions occur between elements at the same level of hierarchy without elevation changes.

Parent to child¶

Exploring deeper levels, or screens, of an app is a hierarchical journey that starts at a parent screen.
From there, a user can explore multiple possible sub-screens, which are children to the parent screen.
In Material Design, elevation changes indicate changes in focus from parent to child elements.

Elevation and expansion¶

The surface that the user touches should lift up and expand into place from its origin. This expansion and motion highlights movement away from the parent towards a destination (a child element) in a natural movement using the material motion curve.

Sibling to sibling¶

Sibling transitions are transitions that occur between elements at the same level of hierarchy.

Static elevation¶

When a user navigates through tabs, for example, no elevation changes occur. The content and surface of each tab stays at the same elevation level. New content slides in from the right while sibling content moves off-screen to the left.