'%20stroke='%23E0E0E0'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2682_149131'%20x1='7'%20y1='4'%20x2='23.0784'%20y2='26.6541'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233A3AEA'/%3e%3cstop%20offset='0.592633'%20stop-color='%23DF13F9'/%3e%3cstop%20offset='0.763157'%20stop-color='%23F0558E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
fast
- damping
- 0.90
- stiffness
- 1400
- settles in
- 350ms
Motion · Use the system · Guide
The six spring tokens, live from your theme
Material specifies six springs — three paces × two property families. Each resolves to a physics pair for JS animation and a CSS easing-plus-duration adapter. Why springs at all, and how the two token families relate, is the spring physics guide.
Official values. This theme is the Material standard scheme, so all six curves and durations below are Material's published web conversion, unchanged.
Live from your theme
Six springs on standard
Change the scheme or fork a spring in Customize and watch the values move.
Spatial position, size, shape
default
- damping
- 0.90
- stiffness
- 700
- settles in
- 500ms
slow
- damping
- 0.90
- stiffness
- 300
- settles in
- 750ms
Effects opacity, color
fast
- damping
- 1.00
- stiffness
- 3800
- settles in
- 150ms
default
- damping
- 1.00
- stiffness
- 1600
- settles in
- 200ms
slow
- damping
- 1.00
- stiffness
- 800
- settles in
- 300ms
A curve drawn in the tertiary colour crosses above 1 — that is the overshoot. It should only ever appear in the spatial block.