When website animation earns its keep (and when it just slows you down)

You have seen a competitor's site where the headline slides up, the photographs scrub past as you scroll and something in the corner reacts to your mouse. It looked expensive, and it made your own site look like a leaflet. Now there is a line on a quote for it, and you are trying to work out whether that money buys you enquiries or just buys you a slower website.

It turns on one question: did your visitor come to look, or did they come to do a job? Animation earns its keep when the product is visual, aspirational or does not physically exist yet, property schemes, architecture and design studios, launches, anything above roughly £5,000 that people think about for weeks before committing. It actively costs you money when somebody arrived to book an MOT, check whether you open on a Sunday, or get a quote at seven in the morning before work.

Looking versus doing

Take the looking end first. Picture a fourteen-home clifftop development in North Cornwall, where the product at launch is a field, a set of drawings and a planning consent. Buyers are being asked to commit seven figures to an idea. Most schemes handle that with the same three things: a slideshow of stiff CGIs, a static site plan and a form.

There, motion is not decoration. It is the only way to put someone inside a place that does not exist. An opening sequence that draws the headland at dawn as you scroll is doing work no photograph can do, because there is nothing yet to photograph. The aim on a site like that is longer, more considered visits and fewer buyers who need the marketing suite before they can picture it.

Now the doing end. Somebody is standing in a car park with an MOT due on Friday, on one bar of signal, with your site and two other garages open. Every animated reveal between them and the phone number is a tax they did not agree to pay. On a garage site, the win comes from the booking form loading in under a second, not from anything that moved.

Most businesses sit awkwardly between the two, and the honest read is that they lean towards doing. A dentist, a builder, a solicitor: people browse a little, then they want a price, a phone number and evidence you are real. Motion can help those pages, but only in small, cheap doses.

The four jobs animation can legitimately do

Every piece of motion on a page should be doing one of four things. If you cannot name which, it is decoration, and decoration has to be judged on cost alone.

1. Orient

Movement that shows relationships and hierarchy. Filter a portfolio grid and the tiles rearrange over about 250 ms, so you understand that the same items reordered rather than a new page loading. A menu that grows out of the button you pressed tells you where it came from and where it will go back to. Cut that motion and people re-read the screen to work out what changed.

2. Explain

Movement that makes a process or a mechanism legible. If you install ground source heat pumps or run a five-stage treatment process, a diagram that builds one stage at a time as the reader moves down the text beats an exploded drawing with numbered callouts. An interactive site plan on a development site does this job rather than the pretty one: fourteen plots, each with its own type, area, aspect and live status, so a buyer can find theirs.

3. Reveal

Movement that controls pacing, so information lands in an order you chose. A section that holds still while three claims arrive one at a time is genuinely useful when the argument has a sequence to it. It is also the most dangerous of the four, because it means taking control of somebody's scroll. Use it once on a page, never twice.

4. Delight

Movement whose only job is to be remembered. This is legitimate, but only when memory is the commercial point, which is true for a studio, a bar, a fashion label or anyone whose brand is doing the selling. For a heating engineer it is not. Being memorable is worth real money in some markets and nothing at all in others.

What it actually costs

Weight is the obvious cost and the smallest one. GSAP plus ScrollTrigger is roughly 40 KB gzipped, which is nothing next to a single unoptimised photograph. A Lottie player is about 70 KB before you add the animation file itself. A pre-rendered scroll frame sequence, the Apple-style approach, runs 8 to 20 MB, and that one is indefensible on mobile data.

Responsiveness is the cost that shows up in your Core Web Vitals. At 60 fps a browser has 16.7 ms to produce each frame, and anything running JavaScript on every frame is competing with the tap somebody just made on your menu. Google's INP threshold is 200 ms. Sites that fail it usually fail because of scripts, and animation is a script. I have written more about what slow really costs you.

Then there is maintenance. A scroll animation is tied to a layout, and layouts change. Add a section, edit some copy, and the thing that was pinned at the right moment now fires halfway down a paragraph. Nobody tells you, because your visitors have no idea what it was supposed to look like.

The accessibility obligation is not optional either. Motion triggers nausea and dizziness for people with vestibular disorders, and WCAG asks that anything moving automatically for more than five seconds can be paused. A scroll-jacked page also fights anyone using a keyboard, where Page Down stops doing the obvious thing, and anyone on a trackpad whose inertia the page keeps fighting. Screen readers and browser find-in-page get confused by content that is technically present but visually hidden until scrolled to.

The cheapest animation is the one you did not build. Two hours of tasteful CSS transitions is a rounding error. A bespoke scroll sequence runs up to about £2,000 on top of a build, and it has to earn that back.

The technical rules, for whoever builds it

Transforms and opacity only. Those two properties can be handed to the compositor and run on the GPU without the browser recalculating layout or repainting anything. Animate width, height, top, left or margin and you force a layout pass on every single frame. That is the difference between a card that glides and a card that stutters on a three-year-old Android.

Box-shadow and blur are expensive. Both force the browser to repaint a soft-edged area sixty times a second, which is why so many hover effects feel sticky. The fix is to put the bigger shadow on a pseudo-element that sits at opacity: 0 and fade it in, so the shadow is drawn once and only its opacity changes.

prefers-reduced-motion is a requirement, not a nicety. A global rule collapsing transition durations is a reasonable floor for small effects. It is not enough for a scroll-driven hero. That needs a designed fallback, which usually means rendering the finished frame and switching every scroll effect off. Same content, same order, no motion.

The page must survive the JavaScript never arriving. This is the failure I see most and the one nobody catches. Elements are set to opacity: 0 in the stylesheet, the animation library is loaded from a CDN, that one request fails on a corporate network or a flaky connection, and the visitor gets a blank page. Apply the hidden state from JavaScript, never from CSS, so a script that never runs leaves everything visible.

A rough guide by business type

Read the middle column before the third one. Plenty of businesses in the bottom half of that table have talked themselves into the top half, usually after seeing a design award winner from a completely different industry.

The test that settles it

Strip every animation out and reload the page. Does it still make sense, does the hierarchy still read, and would it still convert? If yes, the motion is a finish, worth adding if the budget allows, easy to drop if it does not. If no, the animation is holding up something the content should be doing on its own.

That second case is more common than anybody admits. A hero that only works because the words arrive one at a time has a copy problem. A process section that needs a scroll-pinned reveal to feel substantial probably has three steps of real substance and two of padding. Motion is very good at disguising a thin page, right up until somebody reads it on a train with a bad signal.

So the order I work in is: build the whole thing static, get it right, then add motion last and only where it does one of the four jobs. That way the animation budget is the first thing to go when something more useful needs the money, and nothing breaks when it does. A property scheme ends up moving a great deal and a garage site barely at all, and both are the right call for who is reading them. The process page sets out where in a build that decision gets made.

If you are staring at a quote with an animation line on it and cannot tell which half of that table you are in, send me the URL and tell me what you sell. I will give you a straight answer, including the one where you should save the money. Have a look at what a build includes first, then get in touch.