Scroll Animations on Websites: Five Effects, Four Ways to Build Them and the Pitfalls to Avoid

Key takeaways

• Scroll animations tie motion to scrolling. An element fades in as it enters the screen, or a graphic changes as you move down the page.
• CSS can now do much of this on its own. MDN labels the animation-timeline property "Baseline 2026, Newly available". It lets CSS link an animation to scroll position, with no script.
• GSAP's ScrollTrigger is still the tool for complex scenes. Its docs describe scrub, pin and snap.
• Added motion can harm some visitors. The W3C warns that movement beyond ordinary scrolling can set off symptoms in people with vestibular disorders.
• Honour the reduced motion setting. MDN documents prefers-reduced-motion as a mature, widely available browser feature.
• Less is better on a business site. Use scroll motion to explain something, not to decorate.

The short answer

For most business sites, use scroll animation sparingly: a gentle reveal as sections enter the screen, a progress bar on long articles, and perhaps one pinned scene that explains a process. Build simple effects in CSS where you can, use a library such as GSAP only for scenes that need it, and wrap every effect so that visitors who ask for less motion get a still page. If an effect does not help a visitor understand or decide, leave it out.

Who is writing: Amariq designs and builds websites. We have not tested each technique below across browsers for this post. The reasoning and the facts come from the pages linked in the text. The CSS example is an illustration of the documented properties.

What ranks for this search, and what it leaves out

On 9 November 2026 the first page of Google (US, English) for "scroll animation website" was mainly inspiration and tools. It showed Awwwards scroll websites, a Webflow showcase, the GSAP scroll page, Dribbble, an A1 Gallery list of 290 examples, a Reddit thread on r/web_design asking how one site made a scroll animation, a library of scroll effects, a GitHub topic page, Prismic's "CSS Scroll Effects: 50 Interactive Animations" (13 March 2025) and a Framer University post, "10 Scroll Animations to Make Your Website Stand Out".

That mix shows lots of examples and a few how-to pieces. We found none that tells a business owner which effects are worth it, compares ways to build them, or sets out the motion rules in one place. That is the gap this guide fills. Our guide to website animations covers motion in general. This one is about the scroll-linked kind.

Five scroll effects and when to use them

Why the caution? The W3C page that explains WCAG 2.2 criterion 2.3.3, Animation from Interactions (read 9 November 2026), treats parallax as non-essential motion. Plain scrolling is fine, it says. Trouble starts when layers shift beyond what scrolling alone would do, because the vestibular system can react badly. The W3C's advice is that extra movement needs a reason, and visitors need a way to switch it off. The criterion sits at the top conformance tier, so it is not a legal floor, but it shows what careful sites aim for.

Four ways to build scroll animation

CSS scroll-driven animations

MDN's page on scroll-driven animations explains that animation progress is tied to scroll position instead of time. You can drive an animation by scrolling an element, its scroll container or the root. The animation-timeline property attaches the animation to a timeline. MDN describes two functions: scroll() for a scroll progress timeline and view() for a view progress timeline for the nearest ancestor scroll container. The animation shorthand resets animation-timeline to auto, so you must declare animation-timeline after animation.

On support, the animation-timeline page on MDN, read on 9 November 2026, shows a "Baseline 2026, Newly available" label. The Chrome developers' article by Bramus (5 May 2023) lists support badges for Chrome 115, Edge 115, Firefox 159 and Safari 26, and says scroll-driven animations can run off the main thread. It gives no performance numbers. "Newly available" means older browsers and devices may still lack it, so plan a fallback. MDN's own example uses an @supports not check.

GSAP ScrollTrigger

GSAP's ScrollTrigger documentation describes three main features. Scrub ties an animation's progress to the scrollbar, with optional smoothing. Pin holds an element in place for a span of scrolling. Snap settles scrolling at defined points after the visitor stops. The docs recommend gsap.matchMedia() for different setups at different screen sizes. The page does not mention reduced motion, so you must add that yourself. It states no price, so check GSAP's own license page.

A small CSS example

This illustration combines the properties MDN documents. We have not tested this exact code across browsers. It fades a section in as it enters the screen, only where the browser supports scroll timelines and only for visitors who have not asked for reduced motion.

```css @keyframes reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .reveal { animation: reveal linear both; animation-timeline: view(); } } } ```

Three points:

1. Order matters. MDN says the animation shorthand resets animation-timeline, so the timeline line comes after it.
2. The fallback is the default. Browsers without support show the section normally, with no animation. That is the right failure.
3. Only cheap properties change. Fades and slides stay light on the browser. Our website animations post explains which properties to avoid.

Respect the reduced motion setting

On MDN's prefers-reduced-motion page, the value reduce signals that a visitor wants less unneeded movement. The page's own example swaps a scaling effect for a soft fade, and its advice is to remove, tone down or replace the motion.

For scroll effects, that means:

• Parallax and scrubbed scenes: turn off entirely and show the content in place.
• Reveals: show the content at once, or use a simple fade.
• Pinned scenes: unpin and let the steps scroll normally.

Test it. Turn on "reduce motion" in your device settings and load the page.

Pitfalls

Choosing for your site

• A small business brochure site: a simple reveal in CSS, a progress bar on long guides, nothing more.
• A product or showpiece page: one pinned or scrubbed scene that explains the product, with a plain fallback.
• A site built in a builder: use its interaction tools for reveals, and check the page on a phone. See our guides to Webflow interactions and Framer.
• A page that must load fast and convert: skip scroll effects above the first screen. Our guide to hero section design covers the first screen.

A scroll animation checklist

1. Each effect helps the visitor understand something.
2. No more than one or two effect types on a page.
3. The default state shows all content without animation.
4. Effects are wrapped in a prefers-reduced-motion: no-preference query.
5. Parallax and scrubbed scenes are off for reduced motion.
6. Only opacity and transform are animated.
7. Browsers without scroll timeline support show the normal page.
8. Native scrolling is kept.
9. Pinned scenes are short, or off on phones.
10. Heavy media has a still fallback and loads late.
11. The page has been tested on a real phone and with reduced motion on.
12. The page still loads quickly. See how to test website speed.

How Amariq can help

If you want scroll motion that explains your service without slowing the page, send us the page or the idea and we will tell you what we would build and what we would leave out. For a new build we work 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.

Frequently asked questions

What is a scroll animation?

An animation whose timing is linked to scrolling. It may start when an element enters the screen, or its progress may follow the scroll position.

Can I do scroll animations with only CSS?

Yes, in browsers that support scroll-driven animations. MDN labels animation-timeline "Baseline 2026, Newly available", so older browsers may not support it. Give them a normal page.

Do I need GSAP?

Not for simple effects. GSAP's ScrollTrigger suits pinned scenes, scrubbed timelines and snapping. Check GSAP's license page for terms.

Are scroll animations bad for accessibility?

They can be. They can be, for people sensitive to motion. Check prefers-reduced-motion and switch parallax and scrubbed scenes off for visitors who ask for calm.

Do scroll animations slow a site down?

They can, especially heavy video, 3D and large scripts. The Chrome developers' article says CSS scroll timelines can run off the main thread but gives no numbers, so measure your own pages.

Is parallax a bad idea?

For most business sites, usually. The W3C treats it as optional motion. If you use it, keep it gentle and give people a way to turn it off.

How many scroll effects should a page have?

One or two types. A reveal and a progress bar are enough for most pages.