Motion Grammar: When Animation Earns Its Frames

Most interface animation is decoration wearing a function’s badge. The test I apply is blunt: if you cannot explain what an animation tells the user, it does not earn its frames – delete it. What survives that test turns out to be a small grammar: four duration bands, two easing rules, and a handful of jobs motion genuinely does better than static change. Everything else is a designer entertaining themselves at the user’s expense, sixteen milliseconds at a time.

TL;DR

• Motion is information or it is noise. The legitimate jobs: showing where something came from or went, confirming an action registered, directing attention during a change, and masking unavoidable latency. Anything else, cut.
• Four duration bands cover the entire interface: ~100ms for presses and toggles, 150-200ms for hovers and fades, 250-300ms for expand/collapse, 300-400ms for page transitions and modals.
• Two easing rules: ease-out for anything entering, ease-in for anything leaving. Linear is for progress bars and almost nothing else.
• The deletion test outranks the taste test. “Does it feel nice” keeps bad animation alive; “what does it tell the user” kills it.
• Respect prefers-reduced-motion as a first-class requirement, not an afterthought – the grammar has to degrade to instant state change and still make sense.

Motion Is a Sentence, Not a Mood

An interface animation is a claim about causality: this panel came from that button; this item left to that list; this change happened because you acted. When motion carries one of those claims, the user’s mental model updates for free – no reading, no reasoning. When it carries nothing, the user waits for choreography to finish before they can continue, and every wait is a small tax on trust.

That framing produces the working list of jobs motion actually has:

1. Spatial continuity – where did this come from, where did it go. The expanding card, the sheet rising from its trigger, the deleted row collapsing toward the archive icon.
2. Acknowledgment – your press registered. The 100ms button depression, the toggle’s throw, the checkbox’s tick.
3. Attention steering – during a state change, the one thing that moved is the one thing that changed. Motion is the strongest attentional signal we can emit; that is exactly why unearned motion is so expensive.
4. Latency masking – the skeleton shimmer, the optimistic swap, the progressive reveal that makes 400ms of fetch feel intentional rather than broken.

If an animation on your screen is not doing one of those four jobs, it is doing the fifth job: showing off.

The Four Duration Bands

Durations are not taste; they are physics matched to attention. The bands I hold every interface to:

The pattern underneath: duration scales with the size of the change. A control acknowledging a press must be near-instant – past ~150ms, acknowledgment reads as lag. A full-screen transition gets more time because the user needs it to re-orient. The most common failure is inversion: 400ms bouncing buttons (lag disguised as delight) and 100ms modal snaps (disorientation disguised as speed).

Past 400ms, interface motion needs an exceptional reason to exist. Onboarding moments and celebration states occasionally earn 500-600ms; navigation never does. The user runs your transition thousands of times – the choreography that charmed in the demo is the friction they curse in week three.

Two Easing Rules

Easing is where animation acquires physics, and two rules cover nearly everything:

Ease-out for entering. Elements arriving on screen start fast and decelerate into place – they land. Ease-out front-loads the movement, so the eye catches the destination early and the element feels responsive.

Ease-in for leaving. Elements departing accelerate away – they exit with intent. The slow start gives the eye a beat to register that something is leaving before it goes.

Linear easing reads as mechanical because nothing in the physical world moves that way; reserve it for progress indicators, where constant rate is the information. And symmetric ease-in-out on interface transitions is usually a default nobody questioned – it makes entrances sluggish and exits abrupt, the exact opposite of the grammar.

The Deletion Test in Practice

The review procedure that keeps a motion system honest:

1. Inventory every animation on the surface – including the framework defaults nobody chose deliberately.
2. For each, complete the sentence: “This motion tells the user ___.” Spatial origin, acknowledgment, attention, latency – one of the four, in plain words.
3. Anything with a blank stays blank under discussion. “It adds polish” and “it feels premium” are blanks with better vocabularies. Delete the motion and look at the surface for a day; polish that only existed in motion was never polish.
4. Time what survives against the bands, fix the easings, and test the reduced-motion path. prefers-reduced-motion must produce a fully coherent interface of instant state changes – if removing an animation breaks comprehension, the animation was carrying information that should also exist statically, which is its own finding.

Run this on a mature product and typically half the inventory dies. What remains gets faster, more consistent, and paradoxically more noticeable – because motion regains its signal value the moment it stops being ambient.

The System View

In a design system, motion belongs in tokens exactly like spacing and color: named durations (--motion-press: 100ms, --motion-surface: 300ms), named easings (--ease-enter, --ease-exit), and components that consume tokens rather than inventing timings inline. The failure mode of unsystematized motion is not ugliness, it is drift – five modals with five durations, each defensible, collectively incoherent. The same discipline that governs a spacing scale governs a motion scale: every value from the system, or carrying a documented reason.

Motion is also the most perishable layer of a design system – the one contributors freelance on first, because a one-off 250ms tween feels harmless. It is harmless, eleven times, and then the product flickers with eleven accents of unmotivated movement. The grammar holds only as long as the deletion test keeps running.

FAQ

How long should UI animations be?

Match duration to the size of the change: ~100ms for control acknowledgment (presses, toggles), 150-200ms for hovers and fades, 250-300ms for expand/collapse, 300-400ms for page transitions and modals. Longer than 400ms needs an exceptional justification – users repeat interface transitions thousands of times.

What easing should UI animations use?

Ease-out for elements entering (fast start, decelerate into place), ease-in for elements leaving (accelerate away). Linear is for progress indicators only, and symmetric ease-in-out on transitions is usually an unexamined default that makes entrances feel sluggish.

When should an interface use animation at all?

When motion carries information a static change cannot: spatial continuity (where something came from or went), acknowledgment of input, steering attention to what changed, or masking unavoidable latency. If you cannot state which of those jobs an animation does, remove it – decorative motion taxes every interaction it touches.

How does prefers-reduced-motion fit into a motion system?

As a first-class requirement: the reduced path replaces movement with instant state changes, and the interface must remain fully comprehensible. If removing an animation breaks understanding, the motion was carrying information that needs a static equivalent – an accessibility finding and a design finding at once.