motion-design

Motion Design

Duration: The 100/300/500 Rule

Timing matters more than easing. These durations feel right for most UI:

Duration	Use Case	Examples
100-150ms	Instant feedback	Button press, toggle, color change
200-300ms	State changes	Menu open, tooltip, hover states
300-500ms	Layout changes	Accordion, modal, drawer
500-800ms	Entrance animations	Page load, hero reveals

Exit animations are faster than entrances—use ~75% of enter duration.

Easing: Pick the Right Curve

Don't use ease. It's a compromise that's rarely optimal. Instead:

Curve	Use For	CSS
ease-out	Elements entering	cubic-bezier(0.16, 1, 0.3, 1)
ease-in	Elements leaving	cubic-bezier(0.7, 0, 0.84, 0)
ease-in-out	State toggles (there → back)	cubic-bezier(0.65, 0, 0.35, 1)

For micro-interactions, use exponential curves—they feel natural because they mimic real physics (friction, deceleration):

/* Quart out - smooth, refined (recommended default) */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

/* Quint out - slightly more dramatic */
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);

/* Expo out - snappy, confident */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

Avoid bounce and elastic curves. They were trendy in 2015 but now feel tacky and amateurish. Real objects don't bounce when they stop—they decelerate smoothly. Overshoot effects draw attention to the animation itself rather than the content.

The Only Two Properties You Should Animate

transform and opacity only—everything else causes layout recalculation. For height animations (accordions), use grid-template-rows: 0fr → 1fr instead of animating height directly.

Staggered Animations

Use CSS custom properties for cleaner stagger: animation-delay: calc(var(--i, 0) * 50ms) with style="--i: 0" on each item. Cap total stagger time—10 items at 50ms = 500ms total. For many items, reduce per-item delay or cap staggered count.