Which animations help and which hurt
Every animation on your site needs a job you can name. If you can't say what it explains, confirms or points to, cut it.
| Animation | Helps when | Hurts when | Our rule |
|---|---|---|---|
| Product UI animating in | It shows the workflow faster than copy can | It's a heavy GIF or video above the fold | A short loop as video or Lottie |
| Hover and click feedback | It confirms the action | It's slow or bouncy | About 100 ms |
| Scroll reveals | They pace a long page | Content stays hidden, or everything moves | Reveal sections, not single lines |
| Hero headline fade or split text | Rarely | It delays the first thing people read | Show the headline at once |
| Parallax | It adds depth to one section | It runs on every section | Off under reduced motion |
| Carousel or logo marquee | It shows proof in little space | It has no pause | A pause control if it runs past 5 seconds |
| Background video | It sets a mood behind short text | It's a heavy file with no controls | Compressed, with a pause button |
| Preloader | Almost never | It delays every visit | Cut it |
The motion that pays off for a startup explains the product. A short loop of your UI doing the work can replace a paragraph of copy. For complex software, interactive product tours go further, and when you need the whole story told, a full explainer video does the job better.
For a UK marketing agency that works only for ERP consultancies, we built the full Webflow site with scroll-reveal animations and a multi-step conversational contact form. Its buyers are experienced, commercially sharp and quick to dismiss anything generic. Both have a job you can name: a reveal paces a long service page, and a stepped form turns one long form into a few short questions.
Speed: what animation does to Core Web Vitals
Google's Core Web Vitals give three "good" thresholds, measured at the 75th percentile of page loads:
- Largest Contentful Paint (LCP), how fast your main content shows: 2.5 seconds or less.
- Cumulative Layout Shift (CLS), how much the page jumps around: 0.1 or less.
- Interaction to Next Paint (INP), how fast the page responds to a tap or click: 200 ms or less.
Animation can hurt all three.
Late fade-ins and LCP. LCP only counts an element once it's rendered and visible, and it ignores elements at opacity 0 (web.dev). Our reading: if your hero headline or image fades in after a delay, your LCP waits for it. Show the hero at once and animate what sits below it.
Layout properties and CLS. Animating height, width, top or left moves the content around it. web.dev recommends the transform functions scale() and translate() instead. In its own test, moving an element with top and left dropped 50% of frames, while the same move with transform dropped 1% (web.dev). Animate transform and opacity, nothing else.
Heavy files and scripts. Swap GIFs for video. In web.dev's example, a 3.7 MB GIF became a 551 KB MP4 or a 341 KB WebM (web.dev). Our advice for INP: keep animation scripts light, because a page busy running motion is slower to answer a tap.
Speed also shows up in revenue. In Vodafone's A/B test, a 31% better LCP brought 8% more sales.
Accessibility: the rules motion must follow
Three WCAG success criteria and one browser setting cover most motion problems.
- 2.2.2 Pause, Stop, Hide (Level A). Anything that starts on its own, lasts more than five seconds and runs beside other content needs a way to pause, stop or hide it (W3C). That covers logo marquees, auto-playing carousels and background video.
- 2.3.1 Three Flashes or Below Threshold (Level A). Nothing on the page should flash more than three times in any one second.
- 2.3.3 Animation from Interactions (Level AAA). Visitors should be able to turn off motion set off by their own actions, such as parallax scrolling, which can trigger vestibular disorders. Changes of color or opacity don't count as motion (W3C).
The setting is prefers-reduced-motion. Visitors switch it on in macOS, Windows, iOS or Android, and it has worked across browsers since January 2020 (MDN). When it's on, swap movement for a simple fade, as MDN's own example does. Don't remove the content.
Then check the obvious failure: if a reduced-motion rule switches off a fade-in, the element can stay at opacity 0. That hides content from exactly the people you were trying to help.
Timing and restraint
Nielsen Norman Group puts most UI animation between 100 and 500 ms. Small toggles sit near 100 ms, a modal opening suits 200 to 300 ms, and at 500 ms motion starts to drag. Entrances can run a little longer than exits, and anything arriving on screen should ease out: fast at first, slowing as it settles.
Our advice: pick two or three durations and one easing curve, and use them everywhere. Move one thing per screen. When everything animates, nothing stands out, including your call to action.
Building it in Webflow
We're a Webflow Certified Partner, and our advice is native features first, custom code only when there's no other way. Interactions with GSAP launched on July 10, 2025, at no extra cost, with SplitText, staggers, ScrollTrigger and reusable interactions, all without code. So whoever runs your site can adjust motion after launch.
- Set reduced motion on every interaction. Conditional playback offers "no animation" or "skip to end". Use skip to end for reveals, so content lands visible.
- Run one engine. Each loads its own resources, and the reduced-motion setting exists only in GSAP. Classic is still needed for Rive and for navbar, dropdown, tab and slider events (Webflow).
- Use the built-in controls. The Lottie element takes JSON or dotLottie files, background video has a play/pause button setting, and smooth scroll already respects reduced motion.
A pre-launch motion check
- Browse the whole site with reduced motion switched on. Every section should still show its content.
- Find your LCP element in PageSpeed Insights and make sure it isn't animated in.
- Test on a mid-range phone, not only your laptop.
- Give anything that moves for more than five seconds a pause control.
- Confirm nothing flashes more than three times a second.
- Write down each animation's job, and cut any that has none.
Send us your site URL or the Figma file with the motion you're planning, and we'll tell you what to keep and what to cut. Motion design and product UI animation starts at $3,000, and we can build the whole thing as part of our startup website builds. Get in touch.
