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.
From a parent screen, an embedded child element lifts up on touch and expands in place, using Standard easing. 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
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.
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.
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 by changing values such as opacity and scale.
Destinations in a bottom navigation bar transition in place.