Website animation that feels alive and stays fast

Motion is what makes a marketing site feel finished: a headline that settles into place, cards that lift on hover, a section that eases in as you scroll. Done badly, it makes the page stutter on a phone, pushes text around, hides the headline behind a fade and makes some visitors feel unwell. On Framer and Webflow sites alike, three things decide which you get: the properties you animate, how much moves at once and whether the site listens when a visitor asks for less motion.

Which properties should you animate?

Transform and opacity, wherever you can. web.dev advises restricting animations to these two, because the browser can change them at the compositing stage without recalculating the layout or repainting. Moving, scaling, rotating and fading cover almost every effect a marketing site needs.

Avoid animating properties that change an element's size or position. MDN lists width, height, padding, margin, top and left among those that trigger reflow, which web.dev explains makes the browser check every other element on the page. web.dev warns that animations using such properties probably won't stay smooth, and a mid-range phone is where you will see it. To grow a card on hover, use transform: scale(); to slide something in, use transform: translate().

What is prefers-reduced-motion?

It is a CSS media feature that tells your site a visitor has asked their device for less motion, through settings such as Reduce motion on macOS or Remove animations on Android. MDN notes that scaling or panning large objects can trigger discomfort for people with vestibular disorders, and web.dev names parallax scrolling as a trigger for reactions such as dizziness and nausea.

When the setting is on, web.dev's guidance is to remove all non-essential movement. In custom code we only run animation when the visitor has stated no preference, which also covers browsers that don't support the query:

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise 0.4s ease-out both; }
}

Because the hidden starting state lives inside the animation, anyone who doesn't get the animation sees the content at once.

How do Framer and Webflow handle reduced motion?

Both have a built-in option worth switching on. In Framer, the General tab of Site Settings has an accessibility option that disables parallax, transform and layout animations for visitors who prefer reduced motion. Those visitors then see opacity changes only, which you will notice most on appear effects and Ticker components.

In Webflow, interactions have conditional playback settings that include a reduced-motion condition, where you choose No animation or Skip to end. Use No animation for decorative motion and Skip to end for functional motion, such as a menu, so it still opens without the movement.

When the built-in tools can't do an effect, GSAP is a sensible choice. Its site says the library is now free for all users thanks to Webflow's support, and the standard licence covers commercial use, including formerly members-only plugins such as SplitText. The same rules apply: animate transform and opacity, and check the preference in your own code.

Can animation hurt Core Web Vitals?

Yes, through layout shift and a late Largest Contentful Paint. web.dev says animating top and left causes layout shifts, while composited animations using translate can't affect other elements and don't count toward CLS. An entrance effect that grows a section's height pushes everything below it down; a transform leaves the page where it was.

For LCP, web.dev says an element only counts once it has rendered and is visible, and Chromium ignores elements at an opacity of 0. A hero headline waiting invisibly for a fade-in can't be your LCP until it shows. So we keep the hero visible from the first paint and save entrance effects for content further down.

How many scroll effects is too many?

Fewer than most designs start with. We give each page one or two moments that earn their place and let the rest scroll normally. WCAG 2.3.3 Animation from Interactions asks that non-essential motion triggered by interaction, including elements that move as you scroll, can be turned off. It sits at Level AAA, the highest level, but describes the risk well.

Motion that starts on its own has a stricter rule. WCAG 2.2.2 Pause, Stop, Hide, at Level A, says moving content that starts automatically, lasts more than five seconds and sits alongside other content needs a way to pause, stop or hide it. A logo ticker that loops forever fits that description.

What should you check before launch?

1. Scroll every page on a mid-range phone and watch for stutter.
2. Turn on reduced motion and check again: content should still appear and menus should still open.
3. Reload your main pages and confirm the headline and hero image show without waiting for an animation.
4. Check Cumulative Layout Shift in PageSpeed Insights against web.dev's target of 0.1 or less. Lab tests only see shifts during page load, so watch the field data too.
5. Give anything that moves on its own for more than five seconds a pause control, or stop it.

Where to start

Run the checklist on your three busiest pages, once with reduced motion off and once on. If you want motion planned within these limits from the first design, our Framer development service covers it, and our Webflow builds follow the same rules. For a second opinion on a live site, start with a website review.