Website Animation: When It Helps, When It Hurts

Website animation helps when it gives quiet feedback or guides attention on a secondary element. It hurts the moment it delays your content, moves large parts of the page, or makes a fast site feel slow. There is no published A/B test data showing scroll animations lift conversion (NNGroup) — so the honest rule is to use motion sparingly, on purpose, and never on the words people came to read.

We build websites for businesses every week, and animation is one of the most over-asked-for and least-measured features there is. Here is what the research actually says, and how we decide.

Does animation make a website convert better?

There is no evidence that it does. No published study measures a page with fade-in animations against the same page without them and shows a lift in sales, sign-ups, or time on page (NNGroup). The benefit of motion is perceptual, not proven in revenue terms.

What the research does show is the downside clearly. NNGroup found that users perceive animation delays exactly like loading delays — they cannot tell "a cool effect" from "a slow site." When your text fades in on scroll, a visitor reading quickly will often miss the content entirely (NNGroup). That is the trap: the effect you paid for is the thing hiding your message.

So we treat animation as a polish layer, never as a conversion lever. If a section needs to perform, the copy and the offer do the work — not the motion.

When does animation actually help?

Motion earns its place when it is subtle, functional, and tied to something the user did. The research supports a short list:

• Hover feedback on buttons and cards. A button that responds to your cursor confirms it is clickable. UX consensus backs this kind of functional feedback (NNGroup), though there is no controlled study tying it to click-through.
• A single, gentle fade or slide-up on secondary elements — cards, images, an illustration. Position changes draw slightly more attention than opacity changes, so a small slide-up reads as more deliberate (NNGroup). Animate it once; never replay it on every scroll.
• Skeleton loaders for full-page loads. In a user study (n=80, UX Collective), skeleton screens were perceived as faster than spinners. We skip them for anything under a second (NNGroup) — below that, the loader is the only thing the visitor notices.
• Page transitions via the browser's native View Transitions API. It is CSS-only, adds zero JavaScript, and gracefully falls back to a normal page load in browsers that don't support it (Can I Use). Low effort, no downside.

The common thread: motion responds to the user or smooths a real wait. It never blocks the content.

When does animation hurt?

It hurts when it is decorative, heavy, or in the way. The clearest culprits:

• Parallax scrolling. NNGroup found users don't notice or care about parallax during real tasks, and several found it actively annoying — content delivered through it gets missed. There is no conversion data supporting it, and a measurable usability cost. We skip it entirely on business sites.
• Heavy hero animations. A popular animation library like lottie-web weighs 77 KB before the animation file itself and runs on the browser's main thread (Bundlephobia) — the same thread your page needs to stay responsive. A simple CSS animation or a video costs a fraction of that.
• Animating the wrong properties. Moving an element with top/left instead of transform causes roughly 50% frame drops, versus about 1% for the efficient method (web.dev). This is invisible in a demo and very visible on a mid-range phone. We treat "animate only transform and opacity" as a build rule, not a nice-to-have.

Animating top/left instead of transform causes roughly 50% dropped frames, versus about 1% the right way (web.dev).

What about people who get motion sickness?

This is the part most sites ignore, and it matters more than the numbers suggest. Around 35% of US adults over 40 have experienced some vestibular (inner-ear balance) dysfunction (Vestibular.org), and roughly 2.4 million American adults report chronic dizziness (NIDCD). For these visitors, large sliding or parallax effects can trigger real, physical discomfort.

Browsers expose a setting — prefers-reduced-motion — that tells your site the visitor wants less movement. Respecting it is a mandatory WCAG accessibility requirement for auto-playing motion (W3C, SC 2.2.2), it costs almost nothing to implement, and it reduces legal risk. Reduced motion does not mean no motion: gentle fades stay; large slides and parallax get switched off. This is exactly the kind of detail we wire in by default, because it is cheap insurance and the right thing to do.

FAQ

Should my business website have animations?

Only light ones, and only where they help. Functional hover feedback and a single subtle fade on secondary elements are safe. Skip decorative effects on your headlines, your pricing, and your calls to action — there is no proof they convert (NNGroup), and they can hide the message.

Do animations slow down a website?

They can. Heavy animation libraries add weight — lottie-web alone is about 77 KB before any content (Bundlephobia) — and poorly built motion can drop around half your frames on a phone (web.dev). Done correctly with transform and opacity, the cost is negligible. The difference is entirely in how it's built.

Is parallax scrolling good for conversion?

No. There is no data showing it lifts conversion, and NNGroup found users either ignore it or find it annoying, while content delivered through it gets missed. We don't use it on business sites.

What is prefers-reduced-motion?

A browser setting that signals a visitor wants less movement, often because motion makes them dizzy or unwell. With about 35% of adults over 40 affected by vestibular issues (Vestibular.org), respecting it is both a WCAG accessibility requirement and simple courtesy.

We build fast, conversion-focused websites the way the evidence says they should be built — motion that responds and reassures, never motion that gets in the way. If you'd like a site that's quick, findable, and tuned to numbers like these, book a call and we'll show you how we do it.