Motion physics system
The motion physics system makes a UI expressive and easy to use
How it works · Specs
Cross-platform experiences
The motion physics system is available on Jetpack Compose and Android Views (MDC-Android), and can be easily adapted to other platforms.
| Platform | Status | How to apply |
|---|---|---|
| Jetpack Compose | Available | Use built-in components and spring tokens. |
| Android Views (MDC-Android) | Available. Not added to components. | Use built-in spring tokens. |
| Web | Compatible | Use springs when possible, otherwise use curves that mimic the springs for animations without interruptions or gestures. View web conversion table |
Tokens and specs
The spring composite tokens are used in the motion physics system. These composites combine two spring tokens (damping and stiffness) into a single token for ease of use. The easing, duration, and path tokens are used by the legacy system, so can be ignored.
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 | — |
Web: Convert springs to curves
| Spring | Curve |
|---|---|
| Expressive fast spatial | 0.42, 1.67, 0.21, 0.90. Duration = 350ms |
| Expressive default spatial | 0.38, 1.21, 0.22, 1.00. Duration = 500ms |
| Expressive slow spatial | 0.39, 1.29, 0.35, 0.98. Duration = 650ms |
| Expressive fast effects | 0.31, 0.94, 0.34, 1.00. Duration = 150ms |
| Expressive default effects | 0.34, 0.80, 0.34, 1.00. Duration = 200ms |
| Expressive slow effects | 0.34, 0.88, 0.34, 1.00. Duration = 300ms |
| Standard fast spatial | 0.27, 1.06, 0.18, 1.00. Duration = 350ms |
| Standard default spatial | 0.27, 1.06, 0.18, 1.00. Duration = 500ms |
| Standard slow spatial | 0.27, 1.06, 0.18, 1.00. Duration = 750ms |
| Standard fast effects | 0.31, 0.94, 0.34, 1.00. Duration = 150ms |
| Standard default effects | 0.34, 0.80, 0.34, 1.00. Duration = 200ms |
| Standard slow effects | 0.34, 0.88, 0.34, 1.00. Duration = 300ms |
Easing and duration
The original easing and duration tokens are still available to use as a fallback, and are currently used for animating transitions. View easing and duration system