Skip to content
Components
/
Motion
Dark

Motion

Five durations, five curves and three spring configurations. Seven presets alias them, so a sheet, a dialog and a toast move the same way in every screen and in the code.

Duration

Five steps and nothing between them. Click a row to run that one on its own.

motion/duration/instant0ms
motion/duration/fast120ms
motion/duration/base200ms
motion/duration/slow320ms
motion/duration/slower480ms
Token
Value, ms
Used by
motion/duration/instant
0
No preset
motion/duration/fast
120
sheet exit, toast enter, toggle state
motion/duration/base
200
sheet enter, dialog enter, page push
motion/duration/slow
320
No preset
motion/duration/slower
480
skeleton pulse

instant and slow are referenced by no preset. Every preset in the file reaches for fast, base or slower, which leaves those two for a component to name directly.

Easing

The same marker and the same duration, five different curves. Duration says how long, easing says where the time goes.

motion/easing/linearcubic-bezier(0, 0, 1, 1)
motion/easing/standardcubic-bezier(0.2, 0, 0, 1)
motion/easing/deceleratecubic-bezier(0, 0, 0, 1)
motion/easing/acceleratecubic-bezier(0.3, 0, 1, 1)
motion/easing/emphasizedcubic-bezier(0.05, 0.7, 0.1, 1)
Token
Value
Used by
motion/easing/linear
cubic-bezier(0, 0, 1, 1)
skeleton pulse
motion/easing/standard
cubic-bezier(0.2, 0, 0, 1)
toggle state
motion/easing/decelerate
cubic-bezier(0, 0, 0, 1)
sheet enter, toast enter
motion/easing/accelerate
cubic-bezier(0.3, 0, 1, 1)
sheet exit
motion/easing/emphasized
cubic-bezier(0.05, 0.7, 0.1, 1)
dialog enter, page push

decelerate and accelerate are a pair: a thing arriving slows into place, a thing leaving speeds away. standard handles small changes that stay put. emphasized is the steepest of the five off the line, roughly three quarters of the distance covered in the first fifth of the time, then a long settle, which is why it carries the dialog and the page push.

Springs

Three configurations, stated as response, damping and mass. Springs are not expressible in CSS, so they stay in the Figma file and in the native code output; the curves above are what reaches the web.

Token
Response
Damping
Mass
motion/spring/subtle
0.30
0.90
1.0
motion/spring/default
0.40
0.80
1.0
motion/spring/bouncy
0.50
0.65
1.0

subtle carries motion/toast/enter and motion/toggle/state. default carries motion/sheet/enter and motion/dialog/enter. bouncy is referenced by no preset, so it is there for a component that asks for it directly. Mass is 1.0 on all three; response and damping are the only two things that move.

Presets

Seven presets, every one an alias. A preset holds no value of its own, it points at a duration, a curve and, where the platform can spring, a spring.

motion/sheet/enterbase 200ms, decelerate
motion/sheet/exitfast 120ms, accelerate
motion/dialog/enterbase 200ms, emphasized
motion/toast/enterfast 120ms, decelerate
motion/toggle/statefast 120ms, standard
motion/page/pushbase 200ms, emphasized
motion/skeleton/pulseslower 480ms, linear
Preset
Duration
Easing
Spring
motion/sheet/enter
base
decelerate
default
motion/sheet/exit
fast
accelerate
None
motion/dialog/enter
base
emphasized
default
motion/toast/enter
fast
decelerate
subtle
motion/toggle/state
fast
standard
subtle
motion/page/push
base
emphasized
None
motion/skeleton/pulse
slower
linear
None

motion/toggle/state drives the Segmented Control indicator and the Navigation bar pill on these pages, both measured at 120ms on cubic-bezier(0.2, 0, 0, 1). motion/dialog/enter drives the Alert overlay.

There is no motion/dialog/exit. Sheet ships both directions, dialog ships one, so the enter pair currently runs in both directions on the Alert overlay. That is a gap in the file, not a decision, and it is named here rather than papered over.