Motion that earns its place

Most sites we are asked to rebuild have too much motion, and none of it in the places that matter. Every card fades up on scroll, every heading slides in, and the one interaction that could have explained the product does not exist.

Our working rule is one obvious interaction per section. Everything else is a reveal so quiet you would only notice it if it were removed.

Decide first, animate second

Before anything gets a timeline, it has to answer a question: what does the visitor understand after this moves that they did not understand before?

• A stat counting up says the number is large. That is usually already obvious from the number.
• A cover that warps as you scroll past it says the image is a surface, not a screenshot. That is new information.
• A nav that hides on the way down and returns on the way up says the page is long and you are free to keep going.

The first one gets cut. The other two stay, and they get the time that would have gone into animating twelve cards.

Tune to ordinary scrolling

The mistake we made on our own site is worth repeating here: we tuned a velocity-driven cover effect while flicking the trackpad hard, which is how developers scroll when they are testing an effect. Nobody else scrolls that way. To the client it read as no animation at all.

Now we measure instead of guessing. A trigger range like start: "top 110%" to end: "top 62%" is 432 pixels on a 900-pixel viewport, and stating it in pixels is the only way two people can agree on whether it is too fast. Speed-linked zoom stays under about ten percent, because past that the image visibly pumps and the effect starts drawing attention to itself rather than to the work.

If you have to scroll unusually to see it, it is not an effect. It is a bug that flatters you.

Reduced motion is a state, not an exit

prefers-reduced-motion does not mean render nothing. A WebGL section that skips its loop still has to paint one frame, or a reader with the setting on gets an empty rectangle where the artwork should be.

The related trap: never leave a fallback image that a canvas swaps into. The image always paints first, so every load flashes the old artwork before the real thing appears. Either the canvas is the only thing on the page, or the image and the canvas are pixel-identical at rest and nobody can tell the moment of the swap.

What it costs

Seven canvases on one page held 77fps on a laptop, so the budget is rarely the problem. Attention is. Every element that moves spends a little of the visitor’s willingness to keep reading, and a page that spends it all in the first screen has nothing left for the case study three sections down.

The measure of a good motion pass is what came out, not what went in.