Motion Design
The principles governing how UI elements move — easing, duration, and choreography — to communicate meaning and guide attention.
Plain English
Motion in UI is not decoration — it is communication. When a modal slides in from the bottom, users understand it came from below and can be dismissed by swiping down. When a deleted item shrinks and fades, users understand it is gone. Good motion design follows three laws: easing (objects accelerate and decelerate naturally, never at constant speed), duration (fast for important feedback, slow for decorative emphasis), and choreography (elements enter and exit in sequence, not all at once, so the eye is led rather than confused). The most common mistake is linear animation — nothing in the physical world moves at constant speed, so linear motion always feels mechanical.
Technical
Easing: ease-out (cubic-bezier(0, 0, 0.2, 1)) for entrances — starts fast, ends soft, feels natural. ease-in (cubic-bezier(0.4, 0, 1, 1)) for exits — starts slow, accelerates away. ease-in-out (cubic-bezier(0.4, 0, 0.2, 1)) for position changes. Duration guidelines: 100–150ms (micro feedback), 200–300ms (component transitions), 300–500ms (page transitions), 500ms+ (decorative). Choreography: stagger child elements with 30–60ms delays (each child gets delay: i * 50ms).
Live Demo
Easing curves compared
ease-in
Starts slow, ends fast — use for exits
ease-out
Starts fast, ends slow — use for entrances
ease-in-out
Smooth both ways — use for position changes
ease-out feels natural for UI entrances — never use linear, nothing in nature moves at constant speed.
Usage
✓ Good usage
A card list where items slide in one-by-one with 50ms stagger delays and ease-out easing — the eye naturally follows the sequence.
✗ Bad usage
All page elements transitioning simultaneously with the same 600ms linear animation — the page feels like it is animating around the user rather than for them.
Recommended values
- Entrance easing: cubic-bezier(0, 0, 0.2, 1)
- Exit easing: cubic-bezier(0.4, 0, 1, 1)
- Micro-feedback duration: 100–150ms
- Component transition: 200–300ms
- Page transition: 300–500ms
- Stagger delay: 30–60ms per child
Common mistakes
- Linear timing function — nothing in nature moves at constant speed; use easing curves for everything.
- Same duration for all animations — important feedback should be faster than decorative elements.
- No exit animation — elements that simply disappear make the user wonder where they went.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Apply motion design principles to the dashboard. Use ease-out (300ms) for cards entering the viewport. Use ease-in (200ms) for items being deleted. Stagger list items with 40ms delays. Page transitions: 350ms ease-in-out. All animations must respect prefers-reduced-motion.