What Google Material Design 3 does
Material Design 3's generated motion tokens set the standard and emphasized easing to cubic-bezier(0.2, 0, 0, 1), emphasized decelerate (entering) to cubic-bezier(0.05, 0.7, 0.1, 1) and emphasized accelerate (exiting) to cubic-bezier(0.3, 0, 0.8, 0.15). Standard decelerate is cubic-bezier(0, 0, 0, 1), standard accelerate cubic-bezier(0.3, 0, 1, 1), and the legacy Material curve cubic-bezier(0.4, 0, 0.2, 1) is kept. Durations run in 50 ms steps across four bands: short 50 to 200, medium 250 to 400, long 450 to 600, extra long 700 to 1000.
Google Material Design 3's system, as published
- Easing · Standard
- cubic-bezier(0.2, 0, 0, 1)
- Easing · Standard Decelerate
- cubic-bezier(0, 0, 0, 1)
- Easing · Standard Accelerate
- cubic-bezier(0.3, 0, 1, 1)
- Easing · Emphasized
- cubic-bezier(0.2, 0, 0, 1)
- Easing · Emphasized Decelerate
- cubic-bezier(0.05, 0.7, 0.1, 1)
- Easing · Emphasized Accelerate
- cubic-bezier(0.3, 0, 0.8, 0.15)
- Easing · Legacy
- cubic-bezier(0.4, 0, 0.2, 1)
- Easing · Linear
- cubic-bezier(0, 0, 1, 1)
- Duration Ms · Short1
- 50
- Duration Ms · Short2
- 100
- Duration Ms · Short3
- 150
- Duration Ms · Short4
- 200
- Duration Ms · Medium1
- 250
- Duration Ms · Medium2
- 300
- Duration Ms · Medium3
- 350
- Duration Ms · Medium4
- 400
- Duration Ms · Long1
- 450
- Duration Ms · Long2
- 500
- Duration Ms · Long3
- 550
- Duration Ms · Long4
- 600
- Duration Ms · Extra Long1
- 700
- Duration Ms · Extra Long2
- 800
- Duration Ms · Extra Long3
- 900
- Duration Ms · Extra Long4
- 1000
- Token Source Version
- v0.192
Why it works
The emphasized curve starts at full speed and spends most of its time settling, so things feel responsive yet calm. A fixed ladder of durations keeps every transition in the same rhythm.
Best for
Apps, product sites and interactive pieces that want motion that feels quick to start and soft to land
What breaks it
- Mixing this curve family with stock ease-in-out on the same page
- Durations off the 50 ms ladder
- Slow exits that block the next action
Sources
- github.com: Google's generated Material 3 motion tokens (md.sys.motion): every easing curve and duration
Steal it for your brand
The same system, written in your colors, type and shapes. Nothing of Google Material Design 3's look comes with it.
The recipe
- Round every duration to a multiple of 50 ms.
- Bring elements in with the enter curve and take them out with the exit curve; use the move curve for anything that stays on screen and changes place or size.
- Size the duration to the distance and area moved: small for buttons and toggles, medium for cards and panels, large for full-screen changes, using the recipe's duration_small_ms, duration_medium_ms and duration_large_ms.
- Make exits about half as long as the matching entrance.
- Respect reduced-motion settings by swapping movement for a short fade.
What you'll need
- The customer's motion style keyword (calm, crisp or playful)
Recipe as JSON
{
"recipe": {
"easing_enter": [
0.05,
0.7,
0.1,
1
],
"easing_exit": [
0.3,
0,
0.8,
0.15
],
"easing_move": [
0.2,
0,
0,
1
],
"duration_small_ms": {
"by": "style.motion",
"map": {
"calm": 250,
"crisp": 150,
"playful": 200
},
"default": 200
},
"duration_medium_ms": {
"by": "style.motion",
"map": {
"calm": 500,
"crisp": 300,
"playful": 400
},
"default": 350
},
"duration_large_ms": {
"by": "style.motion",
"map": {
"calm": 700,
"crisp": 450,
"playful": 600
},
"default": 500
},
"exit_ratio_to_enter": 0.5,
"step_ms": 50
},
"steps": [
"Round every duration to a multiple of 50 ms.",
"Bring elements in with the enter curve and take them out with the exit curve; use the move curve for anything that stays on screen and changes place or size.",
"Size the duration to the distance and area moved: small for buttons and toggles, medium for cards and panels, large for full-screen changes, using the recipe's duration_small_ms, duration_medium_ms and duration_large_ms.",
"Make exits about half as long as the matching entrance.",
"Respect reduced-motion settings by swapping movement for a short fade."
]
}See it working
- Google Material Design 3: The easing and duration token specs page
The lesson
Publish motion as a small fixed set of tokens, and mark clearly when a newer system replaces them.
The move
The page is headed "Easing and duration" beside a large graphic of an orange oval over green shapes. Two tabs sit below: "Applying easing and duration" and "Tokens & specs". A purple note says motion now uses a springs-based physics system and that this easing and duration system "is no longer maintained".
Why it works
- Our readSplitting guidance from specs in two tabs lets a designer read the principle and an engineer jump straight to tokens.
- Our readThe warning note sits at the top of the content, so a reader sees the status before copying values.
- Our readA hero with a large title and a bold color graphic gives a reference page a clear entry point.
What not to copy
The page says this system is no longer maintained and points to springs, so don’t adopt it fresh. Keep the idea of a short set of named durations and one curve.
