Speed

Speed adjustments make transitions responsive and smooth.


Controlling speed

Transition speed is the observable speed at which a UI changes states. It’s primarily controlled by adjusting duration (how long a transition lasts), but also by easing (acceleration over time) and the distance that elements move.

Apply the right easing type before adjusting duration, as easing adjustments may affect duration.

Usage

Appropriate transition speed helps users to follow UI changes, without complicating tasks. The shortest duration possible should be used that isn’t abrupt or jarring.

Read More

Appropriate transition speed helps users to follow UI changes, without complicating tasks. The shortest duration possible should be used that isn’t abrupt or jarring.

Do.

Make transitions quick and easy to follow.

Don’t.

Avoid transitions that are too fast or slow.


Duration

Regardless of an animation’s style, transitions shouldn’t be jarringly fast or so slow that they keep the user waiting. The right combination of duration and easing produces fluid and clear transitions. The factors below detail how duration should be adjusted to suit each animation.

Complexity level

Simple animations require less time to complete than complex animations.

Read More

Simple animations require less time to complete than complex animations.

Simple animations

Selection controls have a duration of 100ms.

Dialogs enter and exit with a fade animation.

Fade in duration: 150ms
Fade out duration: 75ms

Complex animations

Shape changes are more complex, so they have a longer duration of 200ms.

Icons with detailed animations have a duration of 500ms.

Exits and closing

Transitions that close, dismiss, or collapse an element use shorter durations, as they require less user attention than the user’s next task.

Read More

Transitions that close, dismiss, or collapse an element use shorter durations, as they require less user attention than the user’s next task.

A nav drawer opens over 250ms, and closes over 200ms.

This card expands over 300ms, and collapses over 250ms.

Area

Transitions that traverse a small area of the screen have shorter durations than those that traverse larger areas. Animated elements that traverse a small portion...

Read More

Transitions that traverse a small area of the screen have shorter durations than those that traverse larger areas.

Small

Animated elements that traverse a small portion of the screen have short durations, like icons and selection controls.

A switch animation has a duration of 100ms.

Medium

Animated elements that traverse a larger part of the screen have slightly longer durations, like bottom sheets and expanding chips.

Bottom sheet

  • Expand: 250ms
  • Collapse: 200ms

Chip

  • Expand: 250ms
  • Collapse: 200ms

Large

Animated elements that traverse a large portion of the screen have the longest durations.

Card

  • Expand: 300ms
  • Collapse: 250ms

Persistent sheet

  • Expand: 300ms
  • Collapse: 250ms

Easing

Easing is a way to adjust an animation’s rate of change. Easing allows transitioning elements to speed up and slow down, rather than moving at a constant rate.

In the real world, things don’t start or stop moving instantaneously. They take time to speed up and slow down. Easing makes elements move as though influenced by natural forces like friction.

Transitions without easing look stiff and mechanical.

Do.

Use easing that allows elements to speed up and slow down together. The acceleration of these elements is synchronized, creating a unified impression.

Don’t.

Avoid speeding up elements that should be slowing down, which creates a disorganized impression.

Easing types

Easing types may be named differently across platforms. These guidelines refer to them as standard, accelerate, and decelerate.

Read More

Easing types may be named differently across platforms. These guidelines refer to them as standard, accelerate, and decelerate.

Standard easing

Standard easing puts subtle attention at the end of an animation, by giving more time to deceleration than acceleration. It is the most common form...

Read More

Standard easing puts subtle attention at the end of an animation, by giving more time to deceleration than acceleration. It is the most common form of easing.

Elements that begin and end at rest use standard easing. They speed up quickly and slow down gradually, in order to emphasize the end of the transition.

This graph shows the easing of an element that remains visible throughout a transition. The y-axis shows the position and the x-axis shows the time.

Platform

Protocol

Android

FastOutSlowInInterpolator

iOS

[[CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:0.2f:1.0f]

CSS

cubic-bezier(0.4, 0.0, 0.2, 1);

After Effects

Outgoing Easing: 40%, Incoming Easing: 80%

Decelerate easing

Incoming elements are animated using deceleration easing, which starts a transition at peak velocity (the fastest point of an element’s movement) and ends at rest....

Read More

Incoming elements are animated using deceleration easing, which starts a transition at peak velocity (the fastest point of an element’s movement) and ends at rest.

This graph shows the easing of an element that is visible only at the end of a transition. The y-axis shows the position and the x-axis shows the time.

Platform

Protocol

Android

LinearOutSlowInInterpolator

iOS

[[CAMediaTimingFunction alloc] initWithControlPoints:0.0f:0.0f:0.2f:1.0f]

CSS

cubic-bezier(0.0, 0.0, 0.2, 1);

After Effects

Outgoing Easing: 0%, Incoming Easing: 80%

Accelerate easing

Elements exiting a screen use acceleration easing, where they start at rest and end at peak velocity. Platform Protocol Android FastOutLinearInInterpolator iOS [CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:1.0f:1.0f]...

Read More

Elements exiting a screen use acceleration easing, where they start at rest and end at peak velocity.

This graph shows the easing of an element that is visible only at the beginning of a transition. The y-axis shows the position and the x-axis shows the time.

Platform

Protocol

Android

FastOutLinearInInterpolator

iOS

[CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:1.0f:1.0f]

CSS

cubic-bezier(0.4, 0.0, 1, 1);

After Effects

Outgoing Easing: 40%, Incoming Easing: 0%