Animation

When to animate

Decide whether motion helps at all, and train the judgement to tell

Easing

Choose easing that matches how an element enters, moves, or leaves

Duration & asymmetric timing

Set timing from distance, frequency, and interaction context

Physics-based motion

Use spring motion for responsive interactions and natural interruption

Spatial & directional motion

Match an element's direction of travel to its origin and destination

Stagger & entrance sequences

Sequence related elements without making people wait

Accessibility & performance

Respect reduced-motion preferences and keep animations responsive

Component patterns

Reach for canonical motion specs for common interface components

Gesture & drag

Turn drag distance and velocity into predictable gesture outcomes

clip-path techniques

Reveal and mask elements with CSS clip-path

Scroll animations

Add restrained, progressively enhanced scroll-driven motion