Speed

Speed adjustments make transitions smooth and responsive.


Controlling speed

Speed adjustments include duration (how long a transition lasts) and easing (acceleration over time). Controlling transitions by adjusting speed helps users understand UI changes, without complicating tasks.

DoMake transitions quick and easy to follow. The FAB transitions quickly into a creation page to unobtrusively establish a parent-child relationship.
Don'tAvoid transitions that are too fast for users to follow UI changes or transitions that are overly slow and prevent a user from advancing.

Duration

Regardless of an animation’s style, transitions shouldn’t be jarringly fast or so slow that users feel as though they’re waiting. The right combination of duration and easing produces smooth and clear transitions.

Exits and closing

Transitions that close, dismiss, or collapse an element use shorter durations. Exit transitions may be faster because they require less attention than the user’s next...

Transitions that close, dismiss, or collapse an element use shorter durations. Exit transitions may be faster because they require less attention than the user’s next task.

A navigation drawer opens over 250ms but closes over 200ms.
The card expands over 300ms but collapses over 250ms.

Transition area

Transitions that cover small areas of the screen have shorter durations than those that traverse larger areas. Elements with small transition areas, such as icons...

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

Small

Elements with small transition areas, such as icons and selection controls, have short durations.

A switch animation has a duration of 100ms.

Medium

Elements with larger transition areas, such as bottom sheets and expanding chips, have slightly longer durations.

Animated bottom sheet:
• Expanding: 250ms
• Collapsing: 200ms
Animated chip:
• Expanding: 250ms
• Collapsing: 200ms

Large

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

A FAB into a full-screen dialog:
• Expanding: 300ms
• Collapsing: 250ms
A persistent sheet:
• Expanding: 300ms
• Collapsing: 250ms

Easing

Easing adjusts an animation’s rate of change, allowing transitioning elements to speed up and slow down, rather than move at a constant rate.

In the physical world, objects don’t start or stop instantaneously. Instead, they take time to speed up and slow down. Easing is a technique that makes elements move as though natural forces like friction, gravity, and mass are at work.

Transitions without easing look stiff and mechanical, while a transition with easing is more reminiscent of movement in nature.

Types of easing

Easing types may be named differently across platforms. Material Design refers to: standard, emphasized, accelerated, and decelerated easing.

Easing types may be named differently across platforms. Material Design refers to: standard, emphasized, accelerated, and decelerated easing.


Standard easing

Standard easing subtly brings attention to the end of an animation by taking more time to decelerate than accelerate. Standard easing is the most common...

Standard easing subtly brings attention to the end of an animation by taking more time to decelerate than accelerate. Standard easing 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.

An element with standard easing slows down as it approaches the end of its trajectory. In this graph the y-axis indicates the element’s on-screen position while the x-axis shows time elapsed.

PlatformProtocol
AndroidFastOutSlowInInterpolator
CSScubic-bezier(0.4, 0.0, 0.2, 1);
FlutterstandardEasing
iOS[[CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:0.2f:1.0f]


Emphasized easing

In comparison to standard easing, emphasized easing draws extra attention at the end of an animation. Emphasized easing is usually paired with longer durations to...

In comparison to standard easing, emphasized easing draws extra attention at the end of an animation. Emphasized easing is usually paired with longer durations to convey a more stylized sense of speed.

Elements that begin and end at rest use emphasized easing. They speed up quickly and slow down very gradually, placing extra emphasis on the end of the transition.

An element with emphasized easing slows very gradually as it approaches the end of its trajectory. In this graph the y-axis indicates the element’s on-screen position while the x-axis shows time elapsed.

PlatformProtocol
AndroidFastOutExtraSlowInInterpolator
CSSN/A
FlutterN/A
iOSN/A


Decelerated easing

Incoming elements are animated using decelerated easing, in which transitions begin at peak velocity (the fastest point in an element’s movement) and end at rest....

Incoming elements are animated using decelerated easing, in which transitions begin at peak velocity (the fastest point in an element's movement) and end at rest.

An animated element with decelerated easing enters quickly and ends at rest. In this graph the y-axis indicates the element’s on-screen position while the x-axis shows time elapsed.

PlatformProtocol
AndroidLinearOutSlowInInterpolator
CSScubic-bezier(0.0, 0.0, 0.2, 1);
FlutterdecelerateEasing
iOS[[CAMediaTimingFunction alloc] initWithControlPoints:0.0f:0.0f:0.2f:1.0f]


Accelerated easing

Elements exiting a screen use accelerated easing, a transition in which the element starts at rest and ends at peak velocity. Platform Protocol Android FastOutLinearInInterpolator...

Elements exiting a screen use accelerated easing, a transition in which the element starts at rest and ends at peak velocity.

An element with accelerated easing begins slowly and finishes its trajectory by exiting quickly. In this graph the y-axis indicates the element’s on-screen position while the x-axis shows time elapsed.

PlatformProtocol
AndroidFastOutLinearInInterpolator
CSScubic-bezier(0.4, 0.0, 1, 1);
FlutteraccelerateEasing
iOS[CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:1.0f:1.0f]

Up next