Website Animations: Which Ones Earn Their Place, Which Ones Slow the Page, and a Motion Budget You Can Use

Key takeaways

• Animate to help, not to decorate. Good motion shows what changed, what is clickable, or where to look. Motion that does none of those is a cost.
• Stick to transform and opacity. Google's web.dev guide says to avoid animating properties that trigger layout or paint, because the animation will probably not stay smooth.
• Nothing that moves for more than five seconds should be unstoppable. The W3C's WCAG 2.2 criterion 2.2.2 (Level A) asks for a way to pause, stop or hide it.
• Respect the reduced-motion setting. MDN says honouring prefers-reduced-motion: reduce is the recommended response, since scaling and panning can trigger discomfort for people with vestibular disorders.
• Watch the three speed scores. web.dev's targets are LCP within 2.5 seconds, INP of 200 milliseconds or less and CLS of 0.1 or less.
• Set a budget. One hero motion, small hover and focus feedback, and scroll reveals used sparingly cover most business sites.

The short answer

For a business site, keep animations that explain or reward: a button that reacts when pressed, a menu that opens smoothly, a section that fades in once as it arrives, a single moving element in the hero. Cut animations that delay content, move on their own forever, or run on every scroll. Build the motion with transform and opacity, offer a calm version to anyone who has turned reduced motion on, and test the page's speed on a mid-range phone, not on your own laptop. For motion tied to scrolling, see our scroll animation guide.

Who is writing: Amariq designs and builds websites, including motion on Webflow, Framer and custom builds. We haven't run a controlled test of the effects named here. The rules below come from the standards bodies and platform makers linked in the text.

What ranks for this search, and what it leaves out

On 7 November 2026 the first page of Google (US, English) for "website animations" was a mix of showcases and tools: Webflow's and Awwwards' animation galleries, a Dribbble tag, the GSAP, Motion and LottieFiles sites, Landing Love's collection of 2,256 sites, a Wick Editor page, and two how-to lists from SVGator (31 examples, 24 February 2026) and Wix. Google's own AI summary at the top listed types of animation (scroll-linked, microinteractions, mask reveals, 3D effects, animated icons) and three principles: purpose over flash, performance and accessibility.

Those three principles are the useful part, and the results mostly stop short of them. A gallery shows what is possible. A library shows how. Neither tells a small business whether a parallax hero will cost it enquiries on a phone. That is the gap, and the sections below fill it from sources that don't sell a tool.

Types of animation, sorted by what they do for a visitor

The "verdict" column is our judgement, informed by the sources below, not a measured result.

What makes an animation slow

web.dev's guide to high-performance CSS animations is the clearest source. It says to restrict animations to opacity and transform wherever possible, which keeps them at the compositing stage of the browser's rendering, and to avoid any property that triggers layout or paint unless it is absolutely necessary. Its own demo makes the point: moving a box with top and left dropped about 50% of frames, while the same move with transform dropped about 1%. It also warns that will-change, which asks the browser to prepare an element for change, should be used sparingly and only when you've found a graphics problem.

In plain terms: sliding, fading, scaling and rotating are cheap. Animating width, height, margins, positions, shadows and blurs is not. If you're asking a designer or a builder for an effect, ask whether it moves things with transform and opacity.

What it does to your speed scores

Animations can hurt the three scores that Google asks site owners to watch. web.dev's Web Vitals page (last updated 31 October 2024) gives the targets:

• Largest Contentful Paint (LCP): within 2.5 seconds of the page starting to load. A heavy hero video or a slow intro animation can push the main content past that.
• Interaction to Next Paint (INP): 200 milliseconds or less. Heavy scripts running animations can make taps feel slow.
• Cumulative Layout Shift (CLS): 0.1 or less. Elements that move other content around as they animate in add to it.

web.dev suggests judging the 75th percentile of page loads, split across mobile and desktop. For how to measure these on your own site, see our guides to testing website speed and speeding up a small site.

What it does to some of your visitors

Motion can make some people unwell. The W3C's explanation of WCAG 2.2 criterion 2.3.3 (Animation from Interactions, Level AAA) says users can experience distraction or nausea from animated content, and names scroll-triggered movement and parallax as examples that can trigger vestibular disorders, with dizziness, nausea and headaches. Level AAA is the strictest level, so it isn't a legal baseline, but it describes the harm.

Criterion 2.2.2 (Pause, Stop, Hide, Level A) is a firmer rule. For moving, blinking or scrolling content that starts automatically, lasts more than five seconds and sits alongside other content, there must be a way to pause, stop or hide it, unless the movement is essential. A looping background video or an auto-rotating banner is the usual case.

The fix is prefers-reduced-motion. MDN's page says the setting is exposed in the accessibility settings of Windows, macOS, iOS, Android and several Linux desktops, that reduce means the user asked for less motion, and that it has worked across browsers since January 2020. Its example swaps a scaling animation for a gentle opacity fade. Ask your builder to do the same: keep fades, drop large movement, stop looping video. Our accessibility checklist covers the wider list.

A motion budget for a business site

Give the page a budget, the way you would for photos:

1. One hero motion at most. A moving element, a short loop or a video, not all three.
2. Feedback on every control. Buttons, links and form fields respond to hover, focus and press.
3. Reveal each section once. A short fade or rise as it enters the screen, not a new effect for every line.
4. Keep durations short. Most interface motion should be quick enough that nobody waits for it. That is our rule of thumb, not a standard.
5. Never block content on an animation. Text and the main button must be readable and usable while it plays.
6. Offer a calm version. Reduced-motion users get fades, no large movement and no looping video.
7. Add a pause control for anything that moves on its own for more than five seconds.
8. Test on a mid-range phone with a throttled connection, and re-check your speed scores after adding motion.

Tools and platforms

You don't need to write code to get good motion. Webflow, Framer and similar builders have built-in interactions, and our guide to Webflow interactions covers what they can do. Libraries such as GSAP give developers finer control for scroll-driven work. Whichever route you take, the budget above still applies: a tool makes an effect easy to add, not worth adding. Our posts on hero section design and homepage design ideas show where motion fits in the first screen.

How Amariq can help

If you have a site that feels slow or busy, send us the link and we'll tell you which animations are worth keeping and which to cut. For a new build, we plan motion around what the page needs a visitor to do, then add it with fallbacks for reduced motion. We build on Webflow, Framer, WordPress, Shopify, Wix, Squarespace or a custom stack. Each project is priced from its scope, never by the hour, with 40% to start, 30% at design approval and 30% before launch. Once the final payment is made, the design, copy and code belong to you, and your domain, hosting and analytics accounts sit in your name. See our web design service or the website optimization service.

Frequently asked questions

Do website animations hurt SEO?

Not by themselves. Google's Web Vitals targets (LCP, INP and CLS) are about experience, and a heavy animation can make those worse. Keep motion light and check your scores after adding it.

What CSS properties are best for animation?

transform and opacity. web.dev recommends them because they can stay on the browser's compositing stage, and says to avoid properties that trigger layout or paint.

Are parallax effects bad?

They can be. The W3C names parallax scrolling as an example that can trigger dizziness or nausea for some people. Use it only where it is the point of the page, and turn it off for visitors who choose reduced motion.

What is prefers-reduced-motion?

A browser setting that tells a site the visitor wants less motion. MDN says developers should remove, reduce or replace non-essential movement when it is set to reduce.

How long should an animation last?

There is no official figure. A good rule is that interface motion should be quick enough that nobody waits for it, and anything that moves by itself for more than five seconds needs a pause control under WCAG 2.2.2.

Should I use a video in my hero?

Only if it loads fast and the page works without it. Check your LCP, give reduced-motion users a still image, and add a pause control if it loops.

Can I add animations without coding?

Yes. Webflow, Framer and other builders have built-in interactions. The same budget applies: fewer, shorter, and tested on a phone.