Customization

Motion can be customized to express a distinct style and personality.


Customization options

Personality

Motion can be customized through speed , movement , sequencing , icons & illustrations , and condensing transitions . Customizations should match the desired tone...

Read More

Motion can be customized through speed , movement , sequencing , icons & illustrations , and condensing transitions .

Customizations should match the desired tone and style. For example, a playful app can use oscillation and stretch to create an interface that’s fun and engaging.

Do.

Use animation that matches the style of your app. This animated logo and oscillation occur during a user action with chips.

1. Animated illustration

2. Oscillation

Don’t.

Avoid techniques that conflict with the desired style. Stagger conflicts with this app’s emphasis on efficiency. The elastic animated floating action button and oscillation are too playful for a productivity app.

1. Emphasized stagger

2. Animated icon

3. Oscillation

Consistency

Animation customization techniques should be applied uniformly, with refinements made to suit the context in which they appear. For example, elements can enter the screen...

Read More

Animation customization techniques should be applied uniformly, with refinements made to suit the context in which they appear.

For example, elements can enter the screen in a staggered sequence using a stagger effect. Stagger effects should be applied consistently to similar situations.

Do.

Apply the same techniques everywhere a particular context appears. This UI uses the same stagger effect on list items across all tabs.

Don’t.

Avoid obvious inconsistencies in the treatment of related screens. The list in Bills uses stagger, while the list in Budgets moves as a single element.

Timing

Customizations create connection at key points in a user journey. Subtle details add character to frequent interactions without creating distraction.

Read More

Key touchpoints

Customizations create connection at key points in a user journey.

An animation displayed to reward the user for a task can create delight.

Frequent interactions

Subtle details add character to frequent interactions without creating distraction.

Animated icons add subtle polish to bottom navigation.


Speed

Standard easing

Standard easing is suitable for most transitions. It’s recommended for transitions that help users complete a task, such as basic navigation.

Read More

Standard easing is suitable for most transitions. It’s recommended for transitions that help users complete a task, such as basic navigation.

Standard easing gives this transition a functional style.

Emphasized easing

Emphasized easing places emphasis at the end of an animation. It’s recommended for expressing a relaxed or intense style which can’t be achieved with Standard...

Read More

Emphasized easing places emphasis at the end of an animation. It’s recommended for expressing a relaxed or intense style which can’t be achieved with Standard easing.

Emphasized easing can be used to achieve an intense tone.

Emphasized easing can be used to achieve a relaxed and graceful tone.

Emphasized easing accelerates more quickly than standard easing, so it can move more slowly as it comes to a stop.

Duration

Shortening the duration of an animation can make it feel bolder. Lengthening an animation’s duration can express a more relaxed tone. Standard easing may perform...

Read More

Shortening the duration of an animation can make it feel bolder. Lengthening an animation’s duration can express a more relaxed tone.

Standard easing may perform poorly for durations over 400ms, in those cases consider using Emphasized easing.

Do.

Make small adjustments to the default duration to express a particular tone. Increasing the default from 300ms to 350ms expresses a more relaxed effect, while shortening it to 250ms makes it more bold.

Don’t.

Avoid large adjustments to the default durations. Slowing this transition to 550ms could be too slow, and speeding it up to 115ms could be jarring.


Movement

Motion path

As an element transforms, it moves in a line called a motion path. Motion paths are linear by default. If an element changes size or...

Read More

As an element transforms, it moves in a line called a motion path.

Motion paths are linear by default. If an element changes size or moves diagonally, the motion path can be linear or along an arc.

Linear motion

Linear motion produces a simple movement, suited for most transitions. This motion is minimally distracting.

Do.

This card transforms between collapsed and expanded states in a straightforward way.

Caution.

The transformation creates a large diagonal movement that is incongruous with the predominantly up-and-down or side-to-side movement of other elements.

Arc motion

Arcs mimic natural movement. They are suited to transitions that require a large adjustment to the aspect ratio of a surface.

Do.

This bottom sheet transforms fluidly into a list along an arc motion path.

Caution.

This arc path travels past its resting position on the y-axis.

An arc path has two possible orientations, referred to as vertical out and horizontal out. Vertical out means elements following that arc will finish with a vertical motion, while horizontal out means elements finish in a horizontal direction.

Determine the orientation to use by considering the motion of an expanding surface. The arc should match the primary scrolling axis of the UI. For example, a card in a vertically scrolling UI will expand using a vertical out arc. When the card collapses, the motion reverses, first moving vertically and then horizontally.

Do.

Expand the surface in the direction of scrolling, and collapse the surface in the reverse direction along the same path.

Don’t.

Don’t allow arc motion and scroll direction to clash with one another.

Overshoot

Overshoot refers to animating an element past its resting position, as though propelled by a great force. Overshoot is used to:

Read More

Overshoot refers to animating an element past its resting position, as though propelled by a great force. Overshoot is used to:

  • Emphasize important or time-sensitive information
  • Communicate playfulness and energy to small components, like switches

Apply overshoot to small components to add playfulness.

This dialog uses overshoot to emphasize its entrance.

Oscillation

Oscillation occurs when an animation uses more than one overshoot. Each additional back and forth movement is smaller than the previous one, until the motion...

Read More

Oscillation occurs when an animation uses more than one overshoot. Each additional back and forth movement is smaller than the previous one, until the motion stops. Oscillation may be used for:

  • Fling and overscroll gestures
  • Applying a cartoon style

Do.

Use oscillation with gestures to create a quirky style.

Don’t.

Don’t use oscillation in apps that require functional, efficient interactions.

Stretch

Stretch refers to increasing an element’s size along a single axis. Simple components, such as switches and sliders, can suggest high speed by stretching in...

Read More

Stretch refers to increasing an element’s size along a single axis. Simple components, such as switches and sliders, can suggest high speed by stretching in the direction they’re moving. Stretch can be used when moving horizontally, vertically, or in a circle.

Customize stretch by varying the trailing edge’s delay. The longer the delay, the longer the trail.

Upper dot delay: 150ms
Lower dot delay: 350ms

Horizontal or vertical movements can use stretch. For diagonal movement, use a fade transition instead of stretch.

Stretch adds character to the stepper selection indicator.

Do.

This time indicator moves in an arc as it swings to a new position on the clock.

Don’t.

Avoid stretching elements other than simple shapes (circles, rectangles, and rounded rectangles), diagonal paths, or curves other than a perfect circle.

Don’t.

Don’t use character animation on UI components. The cartoon style of this floating action button is distracting in a task-based app.

Elevation

Elevation refers to an element’s location on the z-axis. During a transition, elevation can be animated to increase depth and emphasize layering. Parallax refers to...

Read More

Elevation refers to an element’s location on the z-axis. During a transition, elevation can be animated to increase depth and emphasize layering.

Parallax

Parallax refers to when elements close to the viewer move faster than those further away. Parallax can be used to indicate that elements occupy different elevations and emphasize depth.

Parallax adds a sense of depth while scrolling.

Parallax indicates which elements are in front of others.

Scale

Elements that shrink in size appear to recede. Elements that grow larger appear to raise in elevation.

The background content shrinks to emphasize its move into the distance.


Sequencing

Temporal offset

To emphasize an element, offset it’s timing relative to other elements. For example, a floating action button can stand out by finishing its entrance after...

Read More

To emphasize an element, offset it’s timing relative to other elements. For example, a floating action button can stand out by finishing its entrance after all other animations have stopped.

The floating action button animation is 100ms longer than the app bar’s animation. This helps the FAB to stand out.

Stagger

Stagger refers to applying temporal offsets to a group of elements in sequence, like a list. Stagger creates a cascade effect that focuses attention briefly...

Read More

Stagger refers to applying temporal offsets to a group of elements in sequence, like a list. Stagger creates a cascade effect that focuses attention briefly on each item. It can reveal significant content or highlight affordances within a group.

Use stagger to add polish to important transitions. This transition is embellished with a stagger when users return to the app.

Stagger hints that member of a group may act as a separate affordance. This staggered movement encourages interaction with individual cards.

Caution.

Avoid stagger for frequent interactions. Repetition can dull the impact and create distraction when the same effect is seen many times in succession.

To provide a point of focus, elements should stagger using short delays, moving in the direction of the primary scrolling axis. To make the effect more subtle, stagger by rows or columns instead of by individual elements.

Items stagger top to bottom to complement vertical scrolling.

Items stagger left to right to complement horizontal scrolling.

Don’t.

Don’t stagger in a random order, which can divide user focus.

Don’t.

Avoid prolonged delays between elements.


Icons & illustrations

Subtle animation in icons, illustrations, and product logos can add polish and playfulness to the user experience.

System icons

Animated system icons are subtle motion refinements added to the default system icons. They contribute to a polished experience. An alert is a persistent, in-app...

Read More

Animated system icons are subtle motion refinements added to the default system icons. They contribute to a polished experience.

These icon animations add playful attention to detail.

The icon animations in Owl, a colorful educational app, were designed to reflect its brand.

Product icons

Animated product icons welcome users and add polish to your UI.

Read More

Animated product icons welcome users and add polish to your UI.

The 3D rotation of this diamond logo adds an imaginative touch.

Logo animations often take cues from the shapes, lines, and patterns of a product’s design. This logo traces a path inspired by a curling piece of paper.

Logo animations can reference the behavior associated with some shapes. This logo steps into view, reflecting the movements of the bird it represents.

Logos can use pronounced character animation to set a tone.

Illustrations

Animated illustrations create moments of user delight.

Read More

Animated illustrations create moments of user delight.

Character animation can demonstrate empathy for an unexpected error.

Illustrations can guide a user through selecting notification settings.


Condensing transitions

Usage

Transitions can be condensed, or simplified, by using shorter shared motion. For example, a list item can travel a shorter distance when it uses a...

Read More

Transitions can be condensed, or simplified, by using shorter shared motion. For example, a list item can travel a shorter distance when it uses a fade transition, instead of tweening the size and position of its container.

The list item transitions using a small vertical shift, instead of a larger transformation.

The list item and focal element transition by tweening size and position. Elements travel greater distances, drawing more attention to the transition.

Large screens

Condensed transitions reduce disorientation caused by movement on a large screen, such as a desktop display.

Read More

Condensed transitions reduce disorientation caused by movement on a large screen, such as a desktop display.

Condensed transitions move between photos on web.