Website animations: when motion makes a site feel slow

Key takeaways

Animation makes a website feel slow when it stands between the visitor and the content. Text that fades in section by section, a loading animation before the page appears and scroll effects that stutter on a phone all add waiting that the connection did not cause. Motion that responds to an action, such as a button changing when pressed, does the opposite. Keep the second kind and cut the first.

• Entrance animations delay content that had already loaded.
• Preloader animations add a wait to every visit.
• Scroll effects that run in script stutter on mid-range phones.
• Motion as feedback makes a site feel faster, not slower.

How do animations slow a website?

Animations slow a website in two distinct ways. The first is weight: animation libraries are extra code to download and run. The second is time: an effect that takes 800 milliseconds to reveal a paragraph has added 800 milliseconds to reading it, on every section, however fast the page arrived.

Google's web.dev guidance on animation notes that some properties are cheap for a browser to animate and others force it to recalculate the layout of the page on every frame. The second kind is what makes scrolling judder.

• How website speed affects customer experience and conversions
• Perceived vs actual website speed: which one matters?

Which animations cause the most trouble?

A few patterns account for most complaints.

• Preloaders: a logo animation shown before the page, sometimes on a fixed timer.
• Scroll reveals: every block fades or slides in as it enters the screen.
• Parallax: backgrounds that move at a different rate to the content.
• Animated counters and typing effects that withhold the information.
• Page transitions that play between every click.
• Auto-advancing carousels.

• Carousels on mobile websites: keep, fix or remove?
• Website slow to respond to taps and clicks? Causes and fixes

Which motion helps the experience?

Motion helps when it answers the visitor. A button that depresses, a menu that slides open in a fraction of a second and a form field that shows a tick all confirm that the site has registered an action. These are short, triggered by the user and cheap for the browser.

A useful rule: animation should explain what just happened, last no more than about a third of a second and never delay content.

• Pressed and hover states on buttons.
• Menus and accordions opening quickly.
• Progress indicators on forms and uploads.
• A brief highlight when something is added to a basket.

What about visitors who dislike motion?

Some people feel unwell or distracted by movement on screen, and phones and computers offer a setting to reduce it. A well-built site respects that setting and switches off non-essential motion.

There is also an accessibility requirement. The Web Content Accessibility Guidelines (WCAG) 2.2 require that moving content which starts automatically and lasts more than five seconds can be paused, stopped or hidden. Auto-playing sliders and looping animations often fail it.

• Website accessibility for UK businesses

When is richer animation justified?

Richer animation is justified when it demonstrates the product or is part of what the business sells, as with a design studio or an interactive product tour. Build it so that the page is complete and usable without it, and test it on an ordinary phone. Animation added to make a simple service site feel modern usually ages quickly and costs speed every day.

• Website speed vs design: do you have to choose?

What does this look like in practice?

A pattern we see on theme-built sites: every section is set to fade in on scroll, and a logo preloader plays for two seconds on each page. The site scores reasonably in tests, because the content has technically loaded. Visitors experience a site that makes them wait for every paragraph.

Switching off the preloader and the entrance effects takes minutes and is often the most noticeable speed improvement a site can make. Global Bridge Labs (GBL) checks how a site feels as well as how it measures.

• See client work
• Website Design & Development for UK businesses

Animation speed checklist

• Remove preloaders and timed loading screens.
• Turn off scroll-reveal effects on text.
• Stop carousels advancing automatically.
• Keep feedback animations under about a third of a second.
• Respect the device's reduced-motion setting.
• Scroll the site on a mid-range phone and watch for stutter.

• The website speed scorecard: score your site in an hour

Next step

If your site loads quickly and still feels slow, animation is a likely cause. We will go through it on a phone and mark what to keep and what to switch off.