Material Design 3 motion tokens
Browse tokens
| Token | Value |
|---|---|
Motion spring fast spatialmd.sys.motion.spring.fast.spatial | — Motion spring fast spatial— md.sys.motion.spring.fast.spatial— |
Motion spring fast effects md.sys.motion.spring.fast.effects | — Motion spring fast effects— md.sys.motion.spring.fast.effects— |
Motion spring default spatialmd.sys.motion.spring.default.spatial | — Motion spring default spatial— md.sys.motion.spring.default.spatial— |
Motion spring default effects md.sys.motion.spring.default.effects | — Motion spring default effects— md.sys.motion.spring.default.effects— |
Motion spring slow spatialmd.sys.motion.spring.slow.spatial | — Motion spring slow spatial— md.sys.motion.spring.slow.spatial— |
Motion spring slow effects md.sys.motion.spring.slow.effects | — Motion spring slow effects— md.sys.motion.spring.slow.effects— |
Spring
| Token | Value |
|---|---|
Motion spring fast spatial dampingmd.sys.motion.spring.fast.spatial.damping | Numeric: 0.6 Motion spring fast spatial dampingNumeric: 0.6 md.sys.motion.spring.fast.spatial.dampingNumeric: 0.6 |
Motion spring fast spatial stiffnessmd.sys.motion.spring.fast.spatial.stiffness | Numeric: 800 Motion spring fast spatial stiffnessNumeric: 800 md.sys.motion.spring.fast.spatial.stiffnessNumeric: 800 |
Motion spring fast effects dampingmd.sys.motion.spring.fast.effects.damping | Numeric: 1 Motion spring fast effects dampingNumeric: 1 md.sys.motion.spring.fast.effects.dampingNumeric: 1 |
Motion spring fast effects stiffnessmd.sys.motion.spring.fast.effects.stiffness | Numeric: 3800 Motion spring fast effects stiffnessNumeric: 3800 md.sys.motion.spring.fast.effects.stiffnessNumeric: 3800 |
Motion spring default spatial dampingmd.sys.motion.spring.default.spatial.damping | Numeric: 0.8 Motion spring default spatial dampingNumeric: 0.8 md.sys.motion.spring.default.spatial.dampingNumeric: 0.8 |
Motion spring default spatial stiffnessmd.sys.motion.spring.default.spatial.stiffness | Numeric: 380 Motion spring default spatial stiffnessNumeric: 380 md.sys.motion.spring.default.spatial.stiffnessNumeric: 380 |
Motion spring default effects dampingmd.sys.motion.spring.default.effects.damping | Numeric: 1 Motion spring default effects dampingNumeric: 1 md.sys.motion.spring.default.effects.dampingNumeric: 1 |
Motion spring default effects stiffnessmd.sys.motion.spring.default.effects.stiffness | Numeric: 1600 Motion spring default effects stiffnessNumeric: 1600 md.sys.motion.spring.default.effects.stiffnessNumeric: 1600 |
Motion spring slow spatial dampingmd.sys.motion.spring.slow.spatial.damping | Numeric: 0.8 Motion spring slow spatial dampingNumeric: 0.8 md.sys.motion.spring.slow.spatial.dampingNumeric: 0.8 |
Motion spring slow spatial stiffnessmd.sys.motion.spring.slow.spatial.stiffness | Numeric: 200 Motion spring slow spatial stiffnessNumeric: 200 md.sys.motion.spring.slow.spatial.stiffnessNumeric: 200 |
Motion spring slow effects dampingmd.sys.motion.spring.slow.effects.damping | Numeric: 1 Motion spring slow effects dampingNumeric: 1 md.sys.motion.spring.slow.effects.dampingNumeric: 1 |
Motion spring slow effects stiffnessmd.sys.motion.spring.slow.effects.stiffness | Numeric: 800 Motion spring slow effects stiffnessNumeric: 800 md.sys.motion.spring.slow.effects.stiffnessNumeric: 800 |
Easing
| Token | Value |
|---|---|
Emphasizedmd.sys.motion.easing.emphasized | CubicBezier: X0: 0.2 · Y1: 1 EmphasizedCubicBezier: X0: 0.2 · Y1: 1 md.sys.motion.easing.emphasized
CubicBezier: X0: 0.2 · Y1: 1 |
Emphasized acceleratemd.sys.motion.easing.emphasized.accelerate | CubicBezier: X0: 0.3 · X1: 0.8 · Y1: 0.15 Emphasized accelerateCubicBezier: X0: 0.3 · X1: 0.8 · Y1: 0.15 md.sys.motion.easing.emphasized.accelerateCubicBezier: X0: 0.3 · X1: 0.8 · Y1: 0.15 |
Emphasized deceleratemd.sys.motion.easing.emphasized.decelerate | CubicBezier: X0: 0.05 · X1: 0.1 · Y0: 0.7 · Y1: 1 Emphasized decelerateCubicBezier: X0: 0.05 · X1: 0.1 · Y0: 0.7 · Y1: 1 md.sys.motion.easing.emphasized.decelerateCubicBezier: X0: 0.05 · X1: 0.1 · Y0: 0.7 · Y1: 1 |
Standardmd.sys.motion.easing.standard | CubicBezier: X0: 0.2 · Y1: 1 StandardCubicBezier: X0: 0.2 · Y1: 1 md.sys.motion.easing.standardCubicBezier: X0: 0.2 · Y1: 1 |
Standard acceleratemd.sys.motion.easing.standard.accelerate | CubicBezier: X0: 0.3 · X1: 1 · Y1: 1 Standard accelerateCubicBezier: X0: 0.3 · X1: 1 · Y1: 1 md.sys.motion.easing.standard.accelerateCubicBezier: X0: 0.3 · X1: 1 · Y1: 1 |
Standard deceleratemd.sys.motion.easing.standard.decelerate | CubicBezier: Y1: 1 Standard decelerateCubicBezier: Y1: 1 md.sys.motion.easing.standard.decelerateCubicBezier: Y1: 1 |
Legacymd.sys.motion.easing.legacy | CubicBezier: X0: 0.4 · X1: 0.2 · Y1: 1 LegacyCubicBezier: X0: 0.4 · X1: 0.2 · Y1: 1 md.sys.motion.easing.legacyCubicBezier: X0: 0.4 · X1: 0.2 · Y1: 1 |
Legacy acceleratemd.sys.motion.easing.legacy.accelerate | CubicBezier: X0: 0.4 · X1: 1 · Y1: 1 Legacy accelerateCubicBezier: X0: 0.4 · X1: 1 · Y1: 1 md.sys.motion.easing.legacy.accelerateCubicBezier: X0: 0.4 · X1: 1 · Y1: 1 |
Legacy deceleratemd.sys.motion.easing.legacy.decelerate | CubicBezier: X1: 0.2 · Y1: 1 Legacy decelerateCubicBezier: X1: 0.2 · Y1: 1 md.sys.motion.easing.legacy.decelerateCubicBezier: X1: 0.2 · Y1: 1 |
Linearmd.sys.motion.easing.linear | CubicBezier: X1: 1 · Y1: 1 LinearCubicBezier: X1: 1 · Y1: 1 md.sys.motion.easing.linearCubicBezier: X1: 1 · Y1: 1 |
Duration
| Token | Value |
|---|---|
Short 1md.sys.motion.duration.short1 | DurationMs: 50 Short 1DurationMs: 50 md.sys.motion.duration.short1DurationMs: 50 |
Short 2md.sys.motion.duration.short2 | DurationMs: 100 Short 2DurationMs: 100 md.sys.motion.duration.short2DurationMs: 100 |
Short 3md.sys.motion.duration.short3 | DurationMs: 150 Short 3DurationMs: 150 md.sys.motion.duration.short3DurationMs: 150 |
Short 4md.sys.motion.duration.short4 | DurationMs: 200 Short 4DurationMs: 200 md.sys.motion.duration.short4DurationMs: 200 |
Medium 1md.sys.motion.duration.medium1 | DurationMs: 250 Medium 1DurationMs: 250 md.sys.motion.duration.medium1DurationMs: 250 |
Medium 2md.sys.motion.duration.medium2 | DurationMs: 300 Medium 2DurationMs: 300 md.sys.motion.duration.medium2DurationMs: 300 |
Medium 3md.sys.motion.duration.medium3 | DurationMs: 350 Medium 3DurationMs: 350 md.sys.motion.duration.medium3DurationMs: 350 |
Medium 4md.sys.motion.duration.medium4 | DurationMs: 400 Medium 4DurationMs: 400 md.sys.motion.duration.medium4DurationMs: 400 |
Long 1md.sys.motion.duration.long1 | DurationMs: 450 Long 1DurationMs: 450 md.sys.motion.duration.long1DurationMs: 450 |
Long 2md.sys.motion.duration.long2 | DurationMs: 500 Long 2DurationMs: 500 md.sys.motion.duration.long2DurationMs: 500 |
Long 3md.sys.motion.duration.long3 | DurationMs: 550 Long 3DurationMs: 550 md.sys.motion.duration.long3DurationMs: 550 |
Long 4md.sys.motion.duration.long4 | DurationMs: 600 Long 4DurationMs: 600 md.sys.motion.duration.long4DurationMs: 600 |
Extra long 1md.sys.motion.duration.extra-long1 | DurationMs: 700 Extra long 1DurationMs: 700 md.sys.motion.duration.extra-long1DurationMs: 700 |
Extra long 2md.sys.motion.duration.extra-long2 | DurationMs: 800 Extra long 2DurationMs: 800 md.sys.motion.duration.extra-long2DurationMs: 800 |
Extra long 3md.sys.motion.duration.extra-long3 | DurationMs: 900 Extra long 3DurationMs: 900 md.sys.motion.duration.extra-long3DurationMs: 900 |
Extra long 4md.sys.motion.duration.extra-long4 | DurationMs: 1000 Extra long 4DurationMs: 1000 md.sys.motion.duration.extra-long4DurationMs: 1000 |
Style
| Token | Value |
|---|---|
Motion pathmd.sys.motion.path | MotionPath: StandardPath: LINEAR Motion pathMotionPath: StandardPath: LINEAR md.sys.motion.pathMotionPath: StandardPath: LINEAR |