---
url: /styles/motion/easing-and-duration/tokens-specs.md
description: Easing and duration create responsive and expressive motion
---

# Easing and duration

Easing and duration create responsive and expressive motion

[Applying easing and duration](applying-easing-and-duration.md) · **Tokens & specs**

::: info Note
In the expressive update, components and motion now use the [motion physics system](../overview/how-it-works.md), 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](../../../foundations/design-tokens/overview.md)

::: token-table token-type-unspecified-20543ce18892f7d9-c83e8cd9
**Motion tokens** · 1 token set · 45 tokens · [live token table](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs) · 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.standard`<br>Compose: `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<br>+2 variation axes | `damping 0.9 · stiffness 1400` | Expressive: `damping 0.6 · stiffness 800` |
| Other | `md.sys.motion.spring.fast.effects` | Custom composite | composite<br>+2 variation axes | `damping 1 · stiffness 3800` | — |
| Other | `md.sys.motion.spring.default.spatial` | Custom composite | composite<br>+2 variation axes | `damping 0.9 · stiffness 700` | Expressive: `damping 0.8 · stiffness 380` |
| Other | `md.sys.motion.spring.default.effects` | Custom composite | composite<br>+2 variation axes | `damping 1 · stiffness 1600` | — |
| Other | `md.sys.motion.spring.slow.spatial` | Custom composite | composite<br>+2 variation axes | `damping 0.9 · stiffness 300` | Expressive: `damping 0.8 · stiffness 200` |
| Other | `md.sys.motion.spring.slow.effects` | Custom composite | composite<br>+2 variation axes | `damping 1 · stiffness 800` | — |
:::

## Easing

<a id="cbea5c6e-7b0d-47a0-98c3-767080a38d95"></a>

### Emphasized easing set

This set is the most common because it captures the expressive style of M3.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flxo7ug8i-GM3-Styles-Motion-Easing_Duration-Tokens-1-1-v01.mp4?alt=media" aria-label="A line graph illustrating an emphasized easing pattern."></video>

Emphasized

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flxo7uv91-GM3-Styles-Motion-Easing_Duration-Tokens-1-2-v01.mp4?alt=media" aria-label="A line graph illustrating an emphasized decelerate easing pattern."></video>

Emphasized decelerate

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flxo7v6ah-GM3-Styles-Motion-Easing_Duration-Tokens-1-3-v01.mp4?alt=media" aria-label="A line graph illustrating an emphasized accelerate easing pattern."></video>

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)](https://developer.android.com/reference/android/view/animation/PathInterpolator) | [PathInterpolator(0.05f, 0.7f, 0.1f, 1f)](https://developer.android.com/reference/android/view/animation/PathInterpolator)         | [PathInterpolator(0.3f, 0f, 0.8f, 0.15f)](https://developer.android.com/reference/android/view/animation/PathInterpolator)         |
| CSS           | N/A (Use Standard as a fallback)                                                                                                                                                    | [cubic-bezier(0.05, 0.7, 0.1, 1.0)](https://www.w3schools.com/cssref/func_cubic-bezier.asp)                                        | [cubic-bezier(0.3, 0.0, 0.8, 0.15)](https://www.w3schools.com/cssref/func_cubic-bezier.asp)                                        |
| Flutter       | [easeInOutCubicEmphasized](https://api.flutter.dev/flutter/animation/Curves/easeInOutCubicEmphasized-constant.html)                                                                 | [Cubic(0.05, 0.7, 0.1, 1.0);](https://api.flutter.dev/flutter/animation/Cubic-class.html)                                          | [Cubic(0.3, 0.0, 0.8, 0.15);](https://api.flutter.dev/flutter/animation/Cubic-class.html)                                          |
| iOS           | N/A (Use Standard as a fallback)                                                                                                                                                    | [ControlPoints:0.05f:0.7f:0.1f:1.0f\];](https://developer.apple.com/documentation/quartzcore/camediatimingfunction)                | [ControlPoints:0.3f:0.0f:0.8f:0.15f\];](https://developer.apple.com/documentation/quartzcore/camediatimingfunction)                |
| After Effects | Use [After Effects Easing Panel](https://storage.googleapis.com/material-io-static/resources/material-easing-1.1.3.zxp) (download)                                                  | Use [After Effects Easing Panel](https://storage.googleapis.com/material-io-static/resources/material-easing-1.1.3.zxp) (download) | Use [After Effects Easing Panel](https://storage.googleapis.com/material-io-static/resources/material-easing-1.1.3.zxp) (download) |

<a id="601d5552-a6e6-4d74-9886-ff8f24b9ec35"></a>

### Standard easing set

This set is used for simple, small, or utility-focused transitions.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flxo7vu4c-GM3-Styles-Motion-Easing_Duration-Tokens-2-1-v01.mp4?alt=media" aria-label="A line graph illustrating a standard easing pattern."></video>

Standard

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flxo7w7mt-GM3-Styles-Motion-Easing_Duration-Tokens-2-2-v01.mp4?alt=media" aria-label="A line graph illustrating a standard decelerate easing pattern."></video>

Standard decelerate

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flxo7wjde-GM3-Styles-Motion-Easing_Duration-Tokens-2-3-v01.mp4?alt=media" aria-label="A line graph illustrating a standard accelerate easing pattern."></video>

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)](https://developer.android.com/reference/android/view/animation/PathInterpolator)              | [PathInterpolator(0f, 0f, 0f, 1f)](https://developer.android.com/reference/android/view/animation/PathInterpolator)                | [PathInterpolator(0.3f, 0f, 1f, 1f)](https://developer.android.com/reference/android/view/animation/PathInterpolator)              |
| CSS           | [cubic-bezier(0.2, 0.0, 0, 1.0);](https://www.w3schools.com/cssref/func_cubic-bezier.asp)                                          | [cubic-bezier(0, 0, 0, 1);](https://www.w3schools.com/cssref/func_cubic-bezier.asp)                                                | [cubic-bezier(0.3, 0, 1, 1);](https://www.w3schools.com/cssref/func_cubic-bezier.asp)                                              |
| Flutter       | [Cubic(0.2, 0.0, 0, 1.0);](https://api.flutter.dev/flutter/animation/Cubic-class.html)                                             | [Cubic(0, 0, 0, 1);](https://api.flutter.dev/flutter/animation/Cubic-class.html)                                                   | [Cubic(0.3, 0, 1, 1);](https://api.flutter.dev/flutter/animation/Cubic-class.html)                                                 |
| iOS           | [ControlPoints:0.2f:0.0f:0.0f:1.0f](https://developer.apple.com/documentation/quartzcore/camediatimingfunction)                    | [ControlPoints:0.0f:0.0f:0.0f:1.0f](https://developer.apple.com/documentation/quartzcore/camediatimingfunction)                    | [ControlPoints:0.3f:0.0f:1.0f:1.0f\];](https://developer.apple.com/documentation/quartzcore/camediatimingfunction)                 |
| After Effects | Use [After Effects Easing Panel](https://storage.googleapis.com/material-io-static/resources/material-easing-1.1.3.zxp) (download) | Use [After Effects Easing Panel](https://storage.googleapis.com/material-io-static/resources/material-easing-1.1.3.zxp) (download) | Use [After Effects Easing Panel](https://storage.googleapis.com/material-io-static/resources/material-easing-1.1.3.zxp) (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     |

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flxo7xbhz-GM3-Styles-Motion-Easing_Duration-Tokens-3-v01.mp4?alt=media" aria-label="Animation showing a 200ms duration and standard easing curve applied to selection control interactions."></video>

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     |

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flxo7xucu-GM3-Styles-Motion-Easing_Duration-Tokens-4-v01.mp4?alt=media" aria-label="Animation showing a FAB expanding into a sheet with a 400ms duration and Emphasized easing."></video>

A FAB expanding into a Sheet uses a 400ms duration with Emphasized easing

<a id="48bf653e-46f9-48f5-87e0-eaf8ea3fe716"></a>

### 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     |

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flxo7ysp0-GM3-Styles-Motion-Easing_Duration-Tokens-5-v01.mp4?alt=media" aria-label="Animation showing a card expanding into a full screen with a 500ms duration and emphasized easing."></video>

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    |

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flxo7z9jk-GM3-Styles-Motion-Easing_Duration-Tokens-6-v01.mp4?alt=media" aria-label="Animation showing the transition of an ambient carousel auto-advancing with a 1000ms duration and emphasized easing."></video>

An ambient carousel auto-advance transition uses an extra long 1000ms duration with emphasized easing