Motion

Motion should appear sparingly in the driving context to express concepts, branding, and relationships between elements. It should only be used to help inform drivers without distracting their attention.

At a glance:

  • Avoid distracting users with unnecessary motion
  • Use motion to increase users’ understanding and build their proficiency
  • Make your motion language flexible enough for all relevant hardware
  • Use the recommended motion pattern for your situation

Motion patterns

To support a consistent user experience across all apps, specific motion patterns apply to the following interactions:

  • Switching between apps
  • Switching between peer views
  • Extending an existing action
  • Minimizing and expanding an action
  • Disrupting an action

These motion patterns are based on standard easing, as described in Material Design, which places focus on a transition’s ending by speeding the transition up quickly, then slowing gradually.


Switching between apps

When switching between apps, use a crossfade transition, which fades one element into view while another element fades out. This transition depicts an exit from the current app while moving quickly into another one.

Switching quickly between apps
The crossfade motion switches the user quickly between apps

Example

App switching example
A swift crossfade takes the user from a navigational app to a media app and back again

Switching between peer views

When switching between views at the same level of hierarchy in an app (also called peer views), such as tabs in an app bar or songs in a playlist, use a shared axis transition. This transition's horizontal, side-to-side movement reflects the state of staying at the same level within an app.

Peer transition example
A swift crossfade takes the user from a navigational app to a media app and back again

Example

The shared axis motion pattern when switching from song to song in a media app reinforces that both songs are in the same playlist

Extending an existing action

When a user is in the process of viewing or taking an action and then takes a secondary, related action, that secondary action should be introduced with a vertical (either up or down) motion. This secondary action is displayed on a full-screen overlay, with a scrim background, in front of the primary action. The presence of the primary action through the scrim reinforces that the user is still in the midst of performing that action.

The secondary action is then closed in the reverse direction of the opening motion. This reverse motion should take less time than the original motion, since the action is done.

Secondary action overlay
Here, the secondary action rises up from the primary action on an overlay, while the primary action remains partially visible behind the scrim

Example

Android Auto action overlay example
Selecting the overflow button on the media control bar causes it to expand vertically on an overlay with a scrim background

Minimizing and expanding an action

Ongoing actions can be minimized into a smaller format. This smaller format allows the user to multitask while the ongoing action runs in the background.

  • Expanding: When the user taps on a minimized action, it expands in size and fills the full screen, using a fade-in transition.

  • Minimizing: When minimizing an ongoing action, use the reverse of this motion. The minimizing motion should take less time than the expanding motion, since the user is leaving this action.

Expanding a minimized screen
The minimized action expands to full screen as it fades in on top of the current action

Example

Android Auto floating action button example
The playback FAB (floating action button) expands into the full playback view then contracts via the down arrow

Disrupting an action

When a short, optional action needs to appear suddenly in front of an ongoing action, it should slide (up or down) from the edge of the screen, with a partial scrim. Alternatively, it should fade into the middle of the screen, with a full scrim. Start the motion from the location closest to where you want the new action to appear.

Short action example
When the disruptive action should appear near the top of the screen, slide it in from the top with a partial scrim

Example

Notification example
In this Android Auto example, a notification about an upcoming turn slides down from the top of the screen with a partial scrim, so that ongoing media content remains visible