Understanding motion

Motion helps make a UI expressive and easy to use.


Principles

Informative

Motion shows spatial and hierarchical relationships between elements, which actions are available, and what will happen if an action is taken.

Focused

Motion focuses attention on what's important without creating unnecessary distraction.

Expressive

Motion celebrates moments in user journeys, adds character to common interactions, and expresses a brand’s personality and style.


Usage

Hierarchy

Motion helps orient users by showing how elements are related to one another. Navigational transitions are movements between states in an app, such as from...

Read More

Motion helps orient users by showing how elements are related to one another.

Motion reflects the hierarchy between the parent element (an inbox) and child elements (the inbox messages).

Motion unites the action of opening the menu with the menu icon.

Motion indicates the hierarchy between peers.

Feedback & status

Motion provides timely feedback and the status of user actions.

Read More

Motion provides timely feedback and the status of user actions.

Motion confirms keypad input and shows whether or not the action was successful.

An animated placeholder UI shows that content is loading.

Motion makes it clear when items are selected and what will happen when they’re released.

User education

Motion indicates how to perform actions and offers helpful suggestions.

Read More

Motion indicates how to perform actions and offers helpful suggestions.

Motion shows how to complete an action using a swipe gesture.

Motion shows the location of selected items.

Character

Motion adds character and appeal to interactions.

Read More

Motion adds character and appeal to interactions.

Motion creates a polished first impression.

Character animation adds a whimsical touch to an unexpected error.


Transition anatomy

During a transition, UI elements that transform are categorized as outgoing, incoming, or persistent. The category an element belongs to influences how it transforms.

UI elements that don’t transform are categorized as static elements. They don’t play a role in the transition.

1. Persistent element

A persistent element’s transformation, such as a navigation icon, starts and ends on screen.

2. Outgoing element

An outgoing element, such as a title, exits the screen by fading out.

3. Incoming element

An incoming element, such as each of these action items, enters the screen by fading in.

4. Static element

A static element, such as the overflow menu, doesn’t transform.


Expressing continuity

Motion guides user attention in a smooth, unbroken fashion. When a UI changes appearance, motion provides continuity between the placement and appearance of elements before and after a transition.

Continuity is expressed using one or more of the following techniques:

  • Tweening
  • Fading
  • Shared transformation

Tweening

Tweening displays a seamless progression of changes applied to a component or element over time. For example, a switch can move smoothly across a screen...

Read More

Tweening displays a seamless progression of changes applied to a component or element over time. For example, a switch can move smoothly across a screen by tweening to its position, or a floating action button (FAB) can transform into a card by tweening FAB size and corner radius.

Tweening can be applied to properties that have a range of intermediate values, such as colors along a spectrum. For example, color can be tweened from red to blue by displaying intermediate colors, like purple.

Tweening can’t be applied to aspects of a UI that don’t have intermediate values or states. For example, the number of columns in a layout can be a whole number, such as 1 or 2, but not something in between.

The floating action button transforms into a surface by tweening its position, size, elevation, color, and corner radius. Tweening is also applied to the opacity of the black scrim.

Fading

Fading refers to tweening an element’s opacity. Even when elements have properties that don’t have intermediate states, fading can create smooth transitions. For example, an...

Read More

Fading refers to tweening an element’s opacity. Even when elements have properties that don’t have intermediate states, fading can create smooth transitions. For example, an image can transition to another image by fading the opacity of one to reveal the other.

Dissolve

A dissolve creates a smooth transition between elements that completely overlap one another, such as photos inside a card or other container. A foreground element fades in (appears) or out (disappears) to show or hide an element behind it.

One element fades to reveal another element hidden behind it.

Cross-dissolve

Cross-dissolve involves two elements fading simultaneously: one fades in while the other fades out. It depicts two elements shown together during a portion of the transition, along with whatever is behind them. This overlap of multiple surfaces may be distracting.

While two elements fade simultaneously, both can be seen together during a portion of the transition. The background partially shows through.

Fade through

Fade through involves one element fading out completely before a new one fades in. These transitions can be applied to text, icons, and other elements that don’t perfectly overlap. This technique lets the background show through during a transition, and it can provide continuity between screens when paired with a shared transformation.

Two elements fade sequentially and aren’t visible at the same time at any point.

Shared transformation

Shared transformation involves synchronizing element movements to enhance continuity. For example, if a FAB suddenly displays a different icon, it could be distracting. A shared...

Read More

Shared transformation involves synchronizing element movements to enhance continuity. For example, if a FAB suddenly displays a different icon, it could be distracting. A shared transformation smoothly expresses a change in icons while the icons are in motion.

1. The floating action button icons switch suddenly.
2. The floating action button icons switch smoothly while in motion.