Easing and duration
Easing and duration create responsive and expressive motion
Applying easing and duration · Tokens & specs
Note
In the expressive update, components and motion now use the motion physics system, which uses springs. Products should migrate to the new system. The easing and duration system is still used for transitions and can be used by teams that haven't yet updated to GM3 Expressive, but is no longer maintained.
Tokens
Motion easing and duration can be implemented using easing and duration tokens. Learn more about design tokens
Design tokens
Token table
Machine-readable relationship table
Motion tokens · 1 token set · 45 tokens · live token table · DSDB TOKEN_TYPE_UNSPECIFIED.20543ce18892f7d9
- Default context: Platform: Android · Motion scheme: Standard
- Not configurable here (group default used): Theme: Light · Audience: 1P Baseline · Font: Static · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default · Language height: Small
- Other contexts: Platform: Web, Compose · Motion scheme: Expressive. "Other contexts" lists values that differ from the default when only that one context changes.
- Reference chain: aliases from the token to its source value (
token → alias → … → value). "—" means the token holds a literal value.
Motion · md.sys.motion · 45 tokens
For all motion. Includes spring tokens (physics system), and legacy easing and duration tokens.
| Group | Token | Type | Reference chain | Resolved value | Other contexts |
|---|---|---|---|---|---|
| Easing | md.sys.motion.easing.emphasized | Cubic bezier | — | M 0,0 C 0.05, 0, 0.133333, 0.06, 0.166666, 0.4 C 0.208333, 0.82, 0.25, 1, 1, 1 | Web: cubic-bezier(0.2, 0, 0, 1) via md.sys.motion.easing.standardCompose: cubic-bezier(0.2, 0, 0, 1) |
| Easing | md.sys.motion.easing.emphasized.accelerate | Cubic bezier | — | cubic-bezier(0.3, 0, 0.8, 0.15) | — |
| Easing | md.sys.motion.easing.emphasized.decelerate | Cubic bezier | — | cubic-bezier(0.05, 0.7, 0.1, 1) | — |
| Easing | md.sys.motion.easing.standard | Cubic bezier | — | cubic-bezier(0.2, 0, 0, 1) | — |
| Easing | md.sys.motion.easing.standard.accelerate | Cubic bezier | — | cubic-bezier(0.3, 0, 1, 1) | — |
| Easing | md.sys.motion.easing.standard.decelerate | Cubic bezier | — | cubic-bezier(0, 0, 0, 1) | — |
| Easing | md.sys.motion.easing.legacy | Cubic bezier | — | cubic-bezier(0.4, 0, 0.2, 1) | — |
| Easing | md.sys.motion.easing.legacy.accelerate | Cubic bezier | — | cubic-bezier(0.4, 0, 1, 1) | — |
| Easing | md.sys.motion.easing.legacy.decelerate | Cubic bezier | — | cubic-bezier(0, 0, 0.2, 1) | — |
| Easing | md.sys.motion.easing.linear | Cubic bezier | — | cubic-bezier(0, 0, 1, 1) | — |
| Duration | md.sys.motion.duration.short1 | Duration | — | 50ms | — |
| Duration | md.sys.motion.duration.short2 | Duration | — | 100ms | — |
| Duration | md.sys.motion.duration.short3 | Duration | — | 150ms | — |
| Duration | md.sys.motion.duration.short4 | Duration | — | 200ms | — |
| Duration | md.sys.motion.duration.medium1 | Duration | — | 250ms | — |
| Duration | md.sys.motion.duration.medium2 | Duration | — | 300ms | — |
| Duration | md.sys.motion.duration.medium3 | Duration | — | 350ms | — |
| Duration | md.sys.motion.duration.medium4 | Duration | — | 400ms | — |
| Duration | md.sys.motion.duration.long1 | Duration | — | 450ms | — |
| Duration | md.sys.motion.duration.long2 | Duration | — | 500ms | — |
| Duration | md.sys.motion.duration.long3 | Duration | — | 550ms | — |
| Duration | md.sys.motion.duration.long4 | Duration | — | 600ms | — |
| Duration | md.sys.motion.duration.extra-long1 | Duration | — | 700ms | — |
| Duration | md.sys.motion.duration.extra-long2 | Duration | — | 800ms | — |
| Duration | md.sys.motion.duration.extra-long3 | Duration | — | 900ms | — |
| Duration | md.sys.motion.duration.extra-long4 | Duration | — | 1000ms | — |
| Style | md.sys.motion.path | Motion path | — | standard path Linear | — |
| Spring | md.sys.motion.spring.fast.spatial.damping | Numeric | — | 0.9 | Expressive: 0.6 |
| Spring | md.sys.motion.spring.fast.spatial.stiffness | Numeric | — | 1400 | Expressive: 800 |
| Spring | md.sys.motion.spring.fast.effects.damping | Numeric | — | 1 | — |
| Spring | md.sys.motion.spring.fast.effects.stiffness | Numeric | — | 3800 | — |
| Spring | md.sys.motion.spring.default.spatial.damping | Numeric | — | 0.9 | Expressive: 0.8 |
| Spring | md.sys.motion.spring.default.spatial.stiffness | Numeric | — | 700 | Expressive: 380 |
| Spring | md.sys.motion.spring.default.effects.damping | Numeric | — | 1 | — |
| Spring | md.sys.motion.spring.default.effects.stiffness | Numeric | — | 1600 | — |
| Spring | md.sys.motion.spring.slow.spatial.damping | Numeric | — | 0.9 | Expressive: 0.8 |
| Spring | md.sys.motion.spring.slow.spatial.stiffness | Numeric | — | 300 | Expressive: 200 |
| Spring | md.sys.motion.spring.slow.effects.damping | Numeric | — | 1 | — |
| Spring | md.sys.motion.spring.slow.effects.stiffness | Numeric | — | 800 | — |
| Other | md.sys.motion.spring.fast.spatial | Custom composite | composite +2 variation axes | damping 0.9 · stiffness 1400 | Expressive: damping 0.6 · stiffness 800 |
| Other | md.sys.motion.spring.fast.effects | Custom composite | composite +2 variation axes | damping 1 · stiffness 3800 | — |
| Other | md.sys.motion.spring.default.spatial | Custom composite | composite +2 variation axes | damping 0.9 · stiffness 700 | Expressive: damping 0.8 · stiffness 380 |
| Other | md.sys.motion.spring.default.effects | Custom composite | composite +2 variation axes | damping 1 · stiffness 1600 | — |
| Other | md.sys.motion.spring.slow.spatial | Custom composite | composite +2 variation axes | damping 0.9 · stiffness 300 | Expressive: damping 0.8 · stiffness 200 |
| Other | md.sys.motion.spring.slow.effects | Custom composite | composite +2 variation axes | damping 1 · stiffness 800 | — |
Easing
Emphasized easing set
This set is the most common because it captures the expressive style of M3.
Emphasized
Emphasized decelerate
Emphasized accelerate
| Info/Platform | Emphasized | Emphasized decelerate | Emphasized accelerate |
|---|---|---|---|
| Token | md.sys.motion.easing.emphasized | md.sys.motion.easing.emphasized.decelerate | md.sys.motion.easing.emphasized.accelerate |
| Android | pathInterpolator(M 0,0 C 0.05, 0, 0.133333, 0.06, 0.166666, 0.4 C 0.208333, 0.82, 0.25, 1, 1, 1) | PathInterpolator(0.05f, 0.7f, 0.1f, 1f) | PathInterpolator(0.3f, 0f, 0.8f, 0.15f) |
| CSS | N/A (Use Standard as a fallback) | cubic-bezier(0.05, 0.7, 0.1, 1.0) | cubic-bezier(0.3, 0.0, 0.8, 0.15) |
| Flutter | easeInOutCubicEmphasized | Cubic(0.05, 0.7, 0.1, 1.0); | Cubic(0.3, 0.0, 0.8, 0.15); |
| iOS | N/A (Use Standard as a fallback) | ControlPoints:0.05f:0.7f:0.1f:1.0f]; | ControlPoints:0.3f:0.0f:0.8f:0.15f]; |
| After Effects | Use After Effects Easing Panel (download) | Use After Effects Easing Panel (download) | Use After Effects Easing Panel (download) |
Standard easing set
This set is used for simple, small, or utility-focused transitions.
Standard
Standard decelerate
Standard accelerate
| Standard | Standard decelerate | Standard accelerate | |
|---|---|---|---|
| Token | md.sys.motion.easing.standard | md.sys.motion.easing.standard.decelerate | md.sys.motion.easing.standard.accelerate |
| Android | PathInterpolator(0.2f, 0f, 0f, 1f) | PathInterpolator(0f, 0f, 0f, 1f) | PathInterpolator(0.3f, 0f, 1f, 1f) |
| CSS | cubic-bezier(0.2, 0.0, 0, 1.0); | cubic-bezier(0, 0, 0, 1); | cubic-bezier(0.3, 0, 1, 1); |
| Flutter | Cubic(0.2, 0.0, 0, 1.0); | Cubic(0, 0, 0, 1); | Cubic(0.3, 0, 1, 1); |
| iOS | ControlPoints:0.2f:0.0f:0.0f:1.0f | ControlPoints:0.0f:0.0f:0.0f:1.0f | ControlPoints:0.3f:0.0f:1.0f:1.0f]; |
| After Effects | Use After Effects Easing Panel (download) | Use After Effects Easing Panel (download) | Use After Effects Easing Panel (download) |
Duration
Short durations
These are used for small utility-focused transitions.
| Token | Value |
|---|---|
| md.sys.motion.duration.short1 | 50ms |
| md.sys.motion.duration.short2 | 100ms |
| md.sys.motion.duration.short3 | 150ms |
| md.sys.motion.duration.short4 | 200ms |
Selection controls have a short duration of 200ms with Standard easing
Medium durations
These are used for transitions that traverse a medium area of the screen.
| Token | Value |
|---|---|
| md.sys.motion.duration.medium1 | 250ms |
| md.sys.motion.duration.medium2 | 300ms |
| md.sys.motion.duration.medium3 | 350ms |
| md.sys.motion.duration.medium4 | 400ms |
A FAB expanding into a Sheet uses a 400ms duration with Emphasized easing
Long durations
These durations are often paired with Emphasized easing. They're used for large expressive transitions.
| Token | Value |
|---|---|
| md.sys.motion.duration.long1 | 450ms |
| md.sys.motion.duration.long2 | 500ms |
| md.sys.motion.duration.long3 | 550ms |
| md.sys.motion.duration.long4 | 600ms |
A Card expanding to full screen uses a long 500ms duration with Emphasized easing
Extra long durations
Though rare, some transitions use durations above 600ms. These are usually used for ambient transitions that don't involve user input.
| Token | Value |
|---|---|
| md.sys.motion.duration.extra-long1 | 700ms |
| md.sys.motion.duration.extra-long2 | 800ms |
| md.sys.motion.duration.extra-long3 | 900ms |
| md.sys.motion.duration.extra-long4 | 1000ms |
An ambient carousel auto-advance transition uses an extra long 1000ms duration with emphasized easing