When to use animation on a website and when to cut it

When should websites use animation

Use animation when it does a job that words and layout cannot do on their own. There are four of those jobs: confirming that something happened after a click, keeping the user oriented when the screen changes, explaining a process or a product that is hard to describe in a static image, and pointing attention at the one action you want next.

Cut the animation when it is decorative, when it delays the content the visitor came for, when it fires without the user asking for it, or when it only exists because the design looked empty. On a B2B site, most scroll-triggered motion fails all four tests and still costs load time.

That is the whole decision. What follows are the tests to run it against, and the tradeoffs to put in front of your team before anyone opens the designer.

The four jobs worth building motion for

Feedback after an action. A button that changes state, a form field that confirms it saved, a filter that shows the list rebuilding. The user did something and the page answers. This is the highest-value motion on any site and usually the cheapest to build.

Continuity between states. When a panel opens, a modal appears or a nav expands, motion shows where the new thing came from. Without it, the screen jumps and the user re-reads the page to find their place.

Explanation of something spatial or sequential. A data pipeline, a multi-step workflow, a before and after. If your product is hard to explain in one static frame, a short loop can carry the idea faster than three paragraphs. This is the one case where a bigger animation earns its weight.

Attention on a single next step. One subtle motion near one call to action. Two competing animations cancel each other out and the page reads as noise.

When to cut it

• It plays on load and the visitor has to wait through it to read the headline.
• It fires on scroll with no purpose other than arrival. Fade-up on every section is a tax paid on every page view.
• It repeats on a loop in the reader's peripheral vision while they are trying to read.
• It moves the page under someone's cursor or thumb.
• It cannot be explained in one sentence that names what the user learns from it.
• It only works on desktop and degrades into a jump on mobile.

The tradeoff is plain. A site with almost no motion can still convert well. A slow site rarely does.

The performance test every animation has to pass

Motion competes with load time, and load time is measured in lost visitors. Google and SOASTA found in 2017 that the probability of a mobile bounce rises 123% as load time goes from 1 to 10 seconds. Google and Deloitte, in Milliseconds Make Millions (2020), found that a 0.1-second mobile speed gain brought 21.6% more users to the form submission step. The bar is not theoretical either - HTTP Archive's Web Almanac, using July 2025 data, found only 48% of mobile websites pass all Core Web Vitals.

So run three checks before a motion ships:

1. Does it animate transform and opacity only? Animating layout properties forces the browser to recalculate the page on every frame.
2. Does it add a library the page does not otherwise need? If one hero effect pulls in a third-party animation bundle, the effect has to be worth the weight on every page that loads it.
3. Does anything above the fold wait on it? Hero content should render first and animate second, never the reverse.

Ammo's results across client work include a 30% decrease in bounce rates and a 10x increase in time to market. Both come from the same discipline: build the fast thing first, then decide what motion is worth adding back. For the deeper version of this, see the guide to Webflow speed optimization.

The accessibility test

Motion is not neutral for everyone. Vestibular disorders make large parallax and zoom effects genuinely unpleasant, and some users cannot read a page where things keep moving.

• Respect the operating system reduced-motion setting. If a visitor has asked their device for less motion, serve them the static version. This is one toggle in most builds and there is no good reason to skip it.
• Anything that moves on its own needs a way to pause or stop it, per WCAG. That includes carousels, auto-playing loops and ticker bars.
• Nothing flashes rapidly. WCAG treats flashing content as a seizure risk, not a style choice.
• Motion never carries information on its own. If the only signal that a form saved is a pulse, screen reader users get nothing.

Enterprise buyers increasingly ask about this in procurement, so it is worth treating as a build requirement rather than a polish pass. The guide to UI/UX in Webflow covers how this fits the wider interface decisions.

Five questions before you build it

1. What does the user learn or confirm from this motion? If the answer is "it looks modern", stop.
2. What is it costing in kilobytes and in milliseconds to first contentful paint?
3. What happens on a mid-range Android phone on a weak connection?
4. What happens with reduced motion on?
5. Who maintains it when the page content changes in six months?

If a motion survives all five, build it. Most will not, and that is the point of the list.

Where motion usually earns its place on a B2B site

Hero. One restrained element at most, loading after the headline and the call to action are readable. Not a full-screen video that pushes the value proposition below the fold.

Product explainer. The strongest case for real animation. A looped sequence showing the product doing the thing it does will outperform a static screenshot, as long as it is compressed properly and does not autoplay with sound.

Pricing and comparison. Almost none. People reading pricing are deciding, and motion gets in the way of comparing.

Forms. Feedback only. Field validation, submit states, success confirmation. Nothing that moves the fields.

Case studies and proof. Numbers should be readable immediately, not counted up from zero. A visitor who scrolls past mid-count sees a wrong number.

Scale raises the stakes. On a site like Uniqode's, with 200,000+ monthly visitors, a single heavy hero effect is paid for 200,000 times a month. Test what motion does to your real traffic before you commit to it across a template. If you want to see how interaction ideas get validated before they go into a production build, see creating interactive Webflow prototypes.

Build it into the system, not onto the page

The sites that stay fast treat motion as part of the design system: a short list of approved interactions, applied consistently, each with a reduced-motion fallback defined once. The sites that get slow add one effect per page, per quarter, forever. That is how a site ends up with four animation approaches and nobody who knows which one to use. Setting those standards up front is part of how we approach web design and development.

Want to know what your current site's speed and structure are costing you before you add anything to it? Run the free GTM audit. It takes a few minutes and gives you a modeled view of where the gaps are.

Frequently asked questions

Does animation hurt SEO

Not directly, but the load time it adds can. Core Web Vitals are part of how pages are assessed, and only 48% of mobile websites pass all of them according to HTTP Archive's Web Almanac using July 2025 data. The risk is not animation itself - it is heavy scripts, large media files and content that waits on motion to render.

Should the hero animate

Usually not much. The hero's job is to tell the right visitor, in a few seconds, what you do and what to click. One restrained element that loads after the text is readable is fine. A full-screen intro animation that the visitor must sit through is a cost with no return.

What about scroll animations on every section

Skip them as a default. Fade-up on every section is applied to pages where nobody decided it was needed, it slows scrolling on mid-range phones, and it adds nothing the reader learns from. Keep scroll-triggered motion for the one or two places where the movement itself explains something.

How do we handle users who do not want motion

Honor the reduced-motion preference their device already sends. Build the static version as the real version and layer motion on top, so turning motion off never breaks the layout. Anything that moves on its own also needs a pause or stop control.

How much does animation work cost

Ammo's published pricing is Growth Support starting at $4,800 / quarter for companies under 100 employees, Growth Partner starting at $5,200 / month for companies with 100 or more, and Growth Partner+ starting at $15,000 / month at enterprise scale. Landing pages start around $10K and full builds run $70K-150K+. Pricing is subject to change. Most motion work sits inside a build or an ongoing plan rather than as a separate line.

Can we add animation to an existing site without slowing it down

Yes, if you measure first. Get a performance baseline, set a budget for what the page is allowed to cost, then add motion inside that budget and re-measure. The order matters - adding first and optimizing later is how sites end up carrying effects nobody can remove without breaking three pages.