Motion is the body language of an interface. Before anyone reads your headline, they've already absorbed how things arrive, settle, and leave, and they've formed an opinion about you. Most sites treat animation as seasoning: sprinkle some fades, call it premium. But easing carries meaning the way tone of voice does, and it deserves the same design attention as colour or type.
Motion is body language
A hard cut says confidence. A slow settle says consideration. An elastic bounce says, usually, that nobody was making decisions that day. None of this is mystical: humans read acceleration profiles the way they read posture, because that's how physical objects communicate weight and intent. Interfaces inherit those instincts for free, whether they design for them or not.
Frame budget at 60fps, everything an animation does must fit inside it
Threshold under which a response reads as instantaneous (Nielsen)
Point at which attention drifts and a transition becomes a wait
The grammar: duration, easing, distance
Three variables carry almost all of motion's meaning. Duration sets importance: micro-feedback (hover, toggles) lives at 120–200ms; structural moves (panels, cards, route changes) at 300–500ms; narrative moments, the ones that define a brand, can afford 600–900ms, exactly once or twice per page. Easing sets character: how the movement spends that time. Distance sets drama, and it's the most abused of the three, a 24px rise reads as poise where a 200px flight reads as theatre.
--ease-out-soft cubic-bezier(0.22, 1, 0.36, 1) / entrances, settles --ease-inout-hard cubic-bezier(0.76, 0, 0.24, 1) / curtains, covers --ease-linear linear / scrub-bound only --dur-micro 150ms / hover, focus, toggles --dur-structural 400ms / cards, panels, overlays --dur-narrative 800ms / hero reveals, once per view rule: no elastic/bounce curves; weight reads as quality
Two disciplines make these tokens real. First: animate only transform and opacity, they run on the compositor thread and survive main-thread congestion; width, height, and top trigger layout and stutter under load. Second: stagger is information. A 40–80ms offset between siblings tells the eye what order to read things in. Random stagger is noise wearing motion's clothes.
Choreography is a brand asset. Treat it like the logo.
Scroll as a timeline
The most important architectural decision in modern motion is trigger versus scrub. Triggered animation fires once when a threshold is crossed, right for reveals, wrong for anything the user should feel in control of. Scrubbed animation binds progress directly to scroll position, turning the page into a timeline the reader owns. Our hero sequences are scrubbed; our content reveals are triggered; and the difference between those two choices is the difference between a film and a slideshow.
Scrub architecture, in practice/
- One rAF-throttled scroll handler per sequence; every frame writes styles directly to refs, never through component state.
- Progress is derived from element geometry (rect.top / runway), not absolute scrollY, so it survives layout changes.
- Eases are applied to the progress value, not the CSS, the browser sees plain transforms.
- Sticky pinning + a tall runway turns scroll distance into narrative time; 100vh of runway ≈ one beat.
- Everything degrades: if JS never runs, the page must still read top to bottom.
Restraint, and who it's for
prefers-reduced-motion is not an edge case, it's a design review. Every sequence needs a reduced counterpart that preserves the information (what appeared, in what order) without the vestibular load: parallax flattens, scrubs become states, entrances become simple fades or nothing. If the reduced version loses meaning, the motion was carrying content it shouldn't have been.
The sites that feel expensive tomorrow won't be the ones with more motion. They'll be the ones where every movement is a decision, and stillness is one too.
