We like motion. This site has an animated shader behind its headline and a scroll-driven parallax in the footer, so we are not about to argue that websites should hold still. But motion is bought with three currencies — milliseconds, attention, and the comfort of people whose bodies react badly to movement — and a surprising amount of it on the web is bought on credit.

The useful question is not does this look good. It is what is this doing, and would the page be worse without it.

The three jobs

In our experience motion has exactly three honest jobs on a website.

Continuity. Showing that this thing became that thing. A card expanding into a detail view, a menu unfolding from the button that opened it, a thumbnail growing into a lightbox. Done well, the visitor never has to re-orient, because they watched the change happen instead of being teleported.

Feedback. Confirming that the interface noticed. A button that depresses, a field that settles into a focused state, a form that visibly starts working when you submit it. This is the category most often skipped and the one users feel most sharply when it is missing.

Hierarchy. Directing the order in which things are read. A staggered entrance can carry the eye through a headline, then a standfirst, then a call to action — the same job as type scale, done in time rather than in space.

Anything that does not fit one of those three is decoration. Decoration is allowed. It just has to be affordable and honest about what it is, rather than smuggled in as craft.

If you cannot say which job an animation is doing, it is doing the fourth one: delaying the content.

Numbers worth holding onto

A few figures that settle most arguments:

  • Feedback should land inside about 100 milliseconds for an interaction to feel instant. Google's Interaction to Next Paint metric asks for 200ms or better at the 75th percentile, and that is a whole-interaction budget, not just the animation.
  • Transitions live between 200 and 500ms. Below 200 and the eye misses the relationship. Above 500 and a returning visitor, who has seen it forty times, starts waiting for the site.
  • Animate transform and opacity, essentially nothing else. Those are the two properties the compositor can handle without recalculating layout. Animating width, top or margin forces layout work on every frame and is where most janky scroll effects come from.
  • Entrance animations should not gate content. If text starts at opacity: 0 and the script that reveals it fails to load, you have shipped a blank page. Fade in from a visible baseline, or make the reveal additive rather than a prerequisite.

Reduced motion is not an edge case

A meaningful number of people get dizzy, nauseous or genuinely unwell from parallax and large-scale movement. Vestibular disorders are common, and the operating systems have offered a setting for years: on macOS, iOS, Windows and Android there is a reduce-motion switch, and the browser hands it to us as prefers-reduced-motion. Honouring it takes one media query.

The part worth getting right is what the reduced version is. Switching every animation off and leaving elements at their pre-animation state — invisible, offset, half-scaled — is worse than not having animated at all. The reduced-motion version should be the finished page, immediately: everything in its final position, opacity 1, transitions removed rather than interrupted. Build that version first and treat the motion as the layer on top.

Scroll-jacking deserves a separate warning. Taking over the scroll wheel breaks the one interaction every visitor already knows how to perform, disables keyboard paging for people who rely on it, and confuses find-on-page. There are a handful of cases where a horizontal gallery justifies it. A marketing homepage is not one of them.

When a shader is worth it

Since we have one on this site, it is fair to hold it to the same test. The hero background is a WebGL mesh gradient — a few kilobytes of shader code drawing simplex noise across four brand colours.

The argument for it: a still gradient in that position would be doing the same job — establishing the brand's blue before a single word is read — and the animated version holds attention for the extra second it takes to read the headline. It runs on the GPU, it does not block the text, and it costs no layout work at all.

The conditions we hold it to: the CSS gradient underneath it is the real design, so if WebGL is unavailable or the context is lost, nothing is missing. It stops when a visitor asks for reduced motion. And it never delays the headline, which is plain HTML and arrives first regardless.

That is roughly the shape of the bargain. Motion sits on top of a page that already works, and it is allowed to fail.

The off switch test

Before shipping, turn the motion off. All of it — set the reduce-motion preference in your OS and reload.

Read the page. If it is calmer, faster and easier to scan, you have been decorating. If something is now genuinely confusing — you cannot tell where a panel came from, or whether the form submitted — that is motion doing one of its three jobs, and it has earned its place.

We design motion alongside the layout rather than after it, and every site we build works with animation switched off. Start a project if that sounds like the right order of operations.