Name the principle, then say what it means in practice.
07
Motion
Principles
Name the principle, then say what it means in practice.
Name the principle, then say what it means in practice.
Curve
Signature — Arrive
cubic-bezier(0.2, 0, 0, 1)Fast 200ms · small thingsBase 360ms · most movesSlow 660ms · big moments
Fades take about 50% of the move they go with.
Code for
Copy for
:root {
--ease-arrive: cubic-bezier(0.2, 0, 0, 1);
--duration-fast: 960ms;
--duration-base: 300ms;
--duration-slow: 500ms;
}
.element {
transition: transform var(--duration-base) var(--ease-arrive);
}Application
In use
Toggle
Switching on and off. Fast · 960ms
Carousel
Moving through a set. Base · 300ms
Modal
Asking for a decision. Slow · 500ms
Options
Edit
Duplicate
Delete
Menu
Opening from what you clicked. Base · 300ms
Continue
Button
Pressing a button. Fast · 960ms
Card
Lifting under the pointer. Fast · 960ms
Overview
Specs
Files
Tabs
Moving between views. Fast · 960ms
Logo
Arriving on screen. Slow · 500ms
Copy link⋮
Tooltip
Explaining on hover. Fast · 960ms
When reduced motion is enabled, every motion becomes a brief fade. Nothing moves, rotates, or changes scale.
Do's and Don'ts
Appearance
Do
Fade in, then settle following our curve.
Don't
Bouncing, springing, or overshoot.
Waiting
Do
Move as soon as the work is done.
Don't
Holding anyone back just so an animation has time to finish.
Comfort
Do
When reduced motion is active, replace every motion with a brief fade.
Don't
Shaking, flashing, or spinning large parts of the screen.