Identity/Motion
Motion
Motion values: named durations and curves, and limits we never cross.
A jump, not a slide: a sharp start and a calm landing.
Curvesover the same distance and duration
Jumpjump · cubic-bezier(0.16, 1, 0.3, 1)
Settlesettle · cubic-bezier(0.22, 1, 0.36, 1)
Exitexit · cubic-bezier(0.4, 0, 1, 1)
Durationsin milliseconds
Instantinstant · 100ms
Fastfast · 160ms
Basebase · 240ms
Slowslow · 420ms
Storystory · 800ms
No interface motion is longer than 420 milliseconds, and “story” is for the big moments only.
Rules
- Entering from the right — where an Arabic line begins.
- Leaving is faster than entering — there's no reason to wait for what's going.
- Each element follows the one before by 50 milliseconds, and distances are 8, 16 and 32 pixels.
And it stops when asked
- We respect the device's reduce-motion setting: nothing moves by itself, and text stays in place.
- The “Pause motion” button on every page — anything that moves by itself for more than five seconds stops with it.
- Three levels by device: full motion on a strong device, half on a medium one, and still images on a weak one.
- We never hide content behind motion, and we never run motion off screen.