Motion that earns its place, and motion that doesn’t

A specifier is on the MRT with one hand on a rail, checking whether you can hold a tolerance. They scroll. Something slides in from the left. A number counts up from zero. A heading skews as it passes the middle of the screen, then straightens. None of it was requested and none of it tells them anything about the tolerance.

That is the whole problem with website motion design as it is usually practised. It is applied to a page rather than designed into one, and the giveaway is that it happens whether or not the person on the other end did anything.

Two things motion is actually for

The first is response. Something moves because someone did something. A drawer slides out from the button that opened it. A filter reorders a list and the rows shift rather than teleport. A form field marks itself invalid with a short movement that draws the eye to where the problem is. This kind of motion is feedback, and feedback is the oldest useful thing an interface can offer.

The second is explanation. Motion shows a relationship between two states so the eye does not have to reconstruct it. A panel that grows out of the thing you clicked tells you where it came from and where it will go back to. Done properly this is close to invisible. Nobody says the transition was nice. They just never get lost.

Everything else is decoration on a timer. Not evil, not always wrong, but it should be argued for rather than assumed, and on a technical B2B site the argument almost never survives contact with the buyer.

Motion that plays at you

The recognisable failures are all variations of the same mistake, which is animating the arrival of content rather than the behaviour of an interface.

Entrance animations on scroll. Every section fades up and slides in as it enters the viewport. It looks considered on the first pass and it is an obstacle on every pass after that, because you have made the reader wait for text that was already downloaded.

Skewed or stretched type driven by scroll velocity. It reads as a demonstration that the developer knows how to bind a value to a scroll position.

Parallax backgrounds. Foreground and background moving at different rates, which is the effect most likely to make a person feel unwell and the one the accessibility guidance names first.

Counters that tick up to a number. If the number matters, print it. Nobody has ever been more convinced by two hundred projects because they watched it climb from zero.

Autoplaying hero video with movement behind the headline. The headline is the most important thing on the page and you have put something moving underneath it.

What these share is that they date. An effect that arrives as a library default dates to the year that library was popular, and a site carrying one is legible as a particular era in the way a typeface is. That is a strange thing to volunteer for on a site that is meant to signal that your engineering is current.

Does anyone actually turn reduced motion on?

More people than the average design review assumes, and they are disproportionately your buyer.

Vestibular disorders are common and badly underestimated. One large epidemiological study cited by the Vestibular Disorders Association estimates that as many as 35% of adults aged 40 years or older in the United States, roughly 69 million people, have experienced some form of vestibular dysfunction. The people signing off equipment purchases and subcontract packages in this industry are mostly in that age band. This is not an edge case you are designing around, it is a meaningful share of the shortlist.

The guidance is explicit about what the harm looks like. WCAG 2.1 Success Criterion 2.3.3, Animation from Interactions, asks that motion animation triggered by interaction can be disabled unless the animation is essential, and its intent section describes triggered reactions including nausea, migraine headaches and potentially needing bed rest to recover. It names parallax scrolling directly. Separately, Success Criterion 2.2.2, Pause, Stop, Hide, which is a Level A requirement rather than an aspiration, says that content which moves automatically for more than a few seconds needs a mechanism to pause, stop or hide it. A looping hero animation with no control fails that.

Honouring it is not difficult. The prefers-reduced-motion media query reads a setting the user has already turned on in macOS, iOS, Windows or Android, and it costs a few lines of CSS. Worth noting that reduce does not mean delete. The better response is usually to swap movement for a cross-fade or an instant state change, so the interface still communicates without the travel.

The test

Build the page so it reads correctly with every animation removed. Then add motion back one piece at a time, and for each piece ask whether a reader would notice something missing or simply notice that the page was calmer.

If the honest answer is calmer, it does not go back. If the honest answer is that a state change became confusing, it earned its place.

We applied that literally on Towa Marine, whose case rests on being reachable within the hour when a vessel has a refrigeration failure alongside. Nothing on that site performs. The availability commitment and the system-by-system capability list are simply there, at the top, holding still, because a superintendent with a problem is not an audience.

Motion is a material like type or colour, and it has a cost in weight, in attention and in comfort. Spend it where it does work. Our pricing bands are published rather than quoted on request, and none of them contain a line item for effects, because effects are not the part of a website that gets you onto a tender list.