Website Animation. When It Helps, When It Hurts

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

We build websites for businesses every week. Clients ask for animation often, and it's one of the least measured features on a website.

Does animation make a website convert better?

There's no evidence that it does. No published study compares a page with fade-in animations against the same page without them and finds a lift in sales, sign-ups or time on page (NNGroup). The benefit of motion is perceptual, and nobody has shown it in revenue terms.

The research is clearer about the downside. NNGroup found that users perceive animation delays the same way as loading delays, so they can't tell "a cool effect" from "a slow site." When text fades in on scroll, a visitor reading quickly will often miss it entirely (NNGroup). The effect you paid for ends up hiding your message.

We treat animation as polish. If a section needs to convert, the copy and the offer have to do that work.

When does animation help?

Motion is useful when it's small and tied to something the user did. The research supports a short list:

• Hover states on buttons and cards. A button that reacts to the cursor confirms it's clickable. This is standard UX advice (NNGroup), though no controlled study ties it to click-through.
• One gentle fade or slide-up on secondary elements such as cards and images. Position changes draw slightly more attention than opacity changes, so a small slide-up reads as more deliberate (NNGroup). Play it once, and don't 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 leave them out for anything under a second (NNGroup), because at that speed the loader is the only thing the visitor notices.
• Page transitions with the browser's native View Transitions API. It needs no JavaScript, and browsers that don't support it load the page normally (Can I Use).

When does animation hurt?

When it's heavy or gets in the way of the content. The clearest cases:

• Parallax scrolling. NNGroup found that users doing real tasks don't notice or care about parallax, and several found it annoying. Content delivered through it gets missed. There's no conversion data in its favour, and it has a measurable usability cost, so we don't use it on business sites.
• Heavy hero animations. The popular lottie-web library 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% dropped frames, versus about 1% with transform (web.dev). You won't see it in a demo, but you will on a mid-range phone. We animate only transform and opacity.

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?

Most sites ignore this part. 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 cause physical discomfort.

Browsers expose a setting, prefers-reduced-motion, that tells your site the visitor wants less movement. Respecting it is a WCAG accessibility requirement for auto-playing motion (W3C, SC 2.2.2). It costs almost nothing to implement and reduces legal risk. With reduced motion on, gentle fades can stay, while large slides and parallax get switched off. We set it up by default.

FAQ

Should my business website have animations?

Light ones, and only where they help. Hover feedback and a single subtle fade on secondary elements are safe. Don't put decorative effects on your headlines, pricing or calls to action. There's no evidence they convert (NNGroup), and they can hide the message.

Do animations slow down a website?

They can. Some animation libraries are heavy: lottie-web alone is about 77 KB before any content (Bundlephobia). Badly built motion can also drop around half your frames on a phone (web.dev). Built with transform and opacity, the cost is negligible.

Is parallax scrolling good for conversion?

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

What is prefers-reduced-motion?

A browser setting that tells your site a visitor wants less movement, often because motion makes them dizzy or unwell. About 35% of adults over 40 are affected by vestibular issues (Vestibular.org). Respecting the setting is a WCAG accessibility requirement as well as basic courtesy.

If your site uses parallax or fades its headlines in on scroll, we'd take those effects out first, then look at the rest of the motion with you on a call.