Why Most Website Animation Fails (and How We Keep Ours Fast)
Animation gets blamed for slow sites more than it deserves, but only because most of it is added without a plan. Here's how we decide what earns a place on a page and what gets cut before launch.
Animation gets a bad reputation it doesn't always deserve. Most of the time, it's not that motion is inherently slow, it's that someone added a scroll effect because it looked good in a Dribbble shot, with no plan for what it costs on a three-year-old Android phone on a weak connection. That's the actual problem, not motion itself.
Done properly, animation is hierarchy, emotion, and feedback, wrapped inside a performance budget someone actually enforces. Here's how we keep motion feeling cinematic without tanking Core Web Vitals.
Start with a motion brief, not a plugin
- What should someone feel in the first three seconds on the page?
- Which specific interactions actually make the product clearer, rather than just decorative?
- What's explicitly off the table? "Parallax everywhere" is not a strategy, it's a symptom of not having one.
The performance budgets that keep everyone honest
- Cap how much JavaScript your animation libraries are allowed to add on marketing routes
- Favor transform and opacity over properties that force the browser to recalculate layout
- Respect
prefers-reduced-motion. It's not optional, and it's not hard to implement. - Lazy-load heavy scenes that sit below the fold instead of loading everything up front
That third point has an actual standard behind it. WCAG Success Criterion 2.3.3, Animation from Interactions, says motion animation triggered by interaction has to be disableable unless it's essential. The W3C's own guidance singles out parallax scrolling as a pattern that causes dizziness, nausea, and headaches in people with vestibular disorders. Honouring prefers-reduced-motion is basically the one-line implementation of that.
What we actually reach for
GSAP for anything that needs real timeline control, Framer Motion when it's React UI doing the talking, Lenis for smooth scroll when it genuinely helps (and switched off entirely when it hurts on mobile, which happens more than people admit), and Three.js only when 3D is actually earning the attention it demands.
When the right call is to say no
If the story on a page isn't clear yet, animation just amplifies the confusion faster. Fix the messaging first. Choreograph second. We've watched more launches get delayed by "one more scroll effect" than by any actual engineering problem.
Want motion that actually helps conversion instead of just looking nice in a portfolio reel? Check out our web development work, or tell us about your project.
Frequently asked questions
Does website animation slow down your site?
It can, but motion is rarely the real culprit. What actually slows sites down is animation nobody budgeted for: heavy libraries loading on every route, effects that force the browser to recalculate layout, scenes below the fold loading up front. Animate transform and opacity, cap how much JavaScript your motion is allowed to add, lazy-load the heavy stuff, and you can ship cinematic motion inside a healthy Core Web Vitals budget.
What is prefers-reduced-motion and do I have to support it?
It's a CSS media query that tells you whether a visitor has asked their operating system to cut down on animation. Supporting it is how you satisfy WCAG Success Criterion 2.3.3, which says interaction-triggered motion has to be disableable unless it's essential. The W3C singles out parallax scrolling as a trigger for dizziness and nausea in people with vestibular disorders. It's a few lines of CSS, and no, it isn't optional.
How much does animation add to a web project's cost?
Tasteful UI motion, meaning microinteractions, scroll reveals and loading states, usually adds 10 to 25% to a build. Coordinated scroll systems with pinned scenes run 25 to 50%. WebGL and 3D work adds 40 to 100% or more. The cost isn't the animating itself. It's the design thinking beforehand and the testing on real mid-range devices afterwards.