Motion as hierarchy: animation that earns its place

Most site animation is decoration with a performance cost. Elements fade in because fading in is what elements do now. Sections slide up on scroll regardless of whether sliding communicates anything. The result is a site that feels busy, reads slowly, and makes every element seem equally important — which is the same as making none of them important.

Motion is a hierarchy tool. Used properly it tells the eye where to go and what just happened. Used decoratively it competes with the content for attention and usually wins, which is a loss.

The one question

Before any animation ships, it has to answer: what does this teach the user?

Valid answers are specific. "This element is the most important thing on the screen." "This came from that button you pressed." "Your action worked." "There is more content below." "These items are a group."

Invalid answers, all of which we've said ourselves at some point: "it feels premium", "the section looked static", "everything else animates". If motion can't name what it teaches, it's decoration — and decoration should be cut, because it costs load time, attention, and accessibility for nothing.

If removing an animation makes the interface harder to understand, it earned its place. If removing it just makes the page quieter, it didn't.

The four jobs motion does well

1. Establishing hierarchy on arrival

When a section enters, motion can stage the reading order — headline first, then supporting text, then the action. This works because it mirrors how you want the content read.

It stops working the moment everything animates. If eight elements stagger in, the hierarchy is flat again and you've added a second of delay for nothing. Animate two or three things per view, at most.

2. Explaining causality

A panel that grows from the button that opened it teaches where it came from and how to dismiss it. A panel that fades in from nowhere teaches nothing. Same information, different comprehension cost.

3. Confirming action

The fastest, cheapest, most-skipped category. A button that responds within about 100ms of a press feels reliable; one that waits for the server feels broken even when it isn't. This is where motion budget should go first and almost never does.

4. Signalling continuation

A subtle cue that content continues below the fold outperforms most hero animations for actual business impact, because it addresses a real failure — people not knowing to scroll.

Timing, concretely

Ranges we work within, and why:

• Micro-feedback (hover, press): 80–150ms. Must feel instantaneous. Above 200ms it reads as lag.
• Element entrances: 300–500ms. Below 250ms the motion isn't legible; above 600ms the user is waiting for the site.
• Section transitions: 400–700ms. Longer is acceptable when something genuinely moves across the screen.
• Stagger between siblings: 40–80ms. More than 100ms and the last item arrives noticeably late.

On easing: entrances should decelerate — fast out of the gate, settling gently. Exits can be quicker and more linear; nobody watches something leave. Linear easing on entrances is the single most common tell of unconsidered motion.

Scroll animation, specifically

Scroll-triggered motion is where sites go wrong most often, for a structural reason: scrolling is user-driven, so the user is already engaged and looking. Adding motion to something they've deliberately scrolled to competes with their attention rather than directing it.

Two rules keep it useful:

• Animate once. Elements that re-animate on every scroll past are actively irritating.
• Never delay reading. Content should be legible the instant it's in view. Motion can refine its arrival; it cannot gate it.

Scroll-scrubbed motion — where progress maps to scroll position — is the exception worth the cost, because the user controls it and it can genuinely explain a process. It's also expensive to do well, so reserve it for one moment per site.

The accessibility floor

Non-negotiable, and cheap:

• Honour prefers-reduced-motion. Not by disabling everything — by replacing movement with opacity, keeping the meaning without the vestibular cost.
• Never convey information by motion alone. If an animation is the only signal something changed, it's invisible to a portion of your users.
• Keep focus states instant. Keyboard navigation through animated focus rings is genuinely unpleasant.

These are also performance wins, which is a rare alignment. The same discipline shows up in the interface work we ship and connects directly to how craft signals price — restraint reads as confidence in motion exactly as it does in layout.

The short version

Ask what each animation teaches. Keep the ones that establish hierarchy, explain causality, confirm action, or signal continuation. Cut the rest — the page gets faster, the content gets clearer, and the motion that remains actually gets noticed.

Related: why your website is a product. Or talk to us about interface work.