Guides · · Maxwell Prehoda
12 Scroll Animation Examples, From CSS-Only Reveals to Pinned Scroll Stories
Most scroll animations fall into three families: reveals that play as an element enters the screen, effects scrubbed to the scrollbar (progress bars, parallax, shrinking headers), and pinned scenes where the page holds still while a story plays. Since October 2026 the first two run in plain CSS in every major browser, and real stores already use them in production. The third still belongs to JavaScript tools like GSAP and Scrollama.
Below are 12 examples across those families: production case studies, the libraries behind award-winning sites, and two of our own CSS snippets that you can scroll past on this page. Every third-party source here was opened and checked; live demos under third-party entries are our pure-CSS takes on the pattern, not their code. For Apple's image-sequence product pages, see our separate guide to Apple-style scroll animations.
1. Tokopedia, redBus and Policybazaar on CSS scroll-driven animations: Best for e-commerce teams replacing JavaScript scroll listeners
Platform: Pure CSS, animation-timeline (Chrome for Developers case study)
Chrome's case study is the best proof that scroll-driven CSS is ready for real traffic. Tokopedia animates the visibility of a sticky top bar with a scroll progress timeline over an animation-range of 20px to 70px, and reports up to 80% fewer lines of code than its JavaScript scroll events, with average CPU use while scrolling falling from about 50% to 2%. redBus uses a clip-path and opacity image reveal on mobile, a Cover Flow gallery on desktop and fly-in product cards. Policybazaar shrinks the plan names and fades the header of its insurance comparison table to free up room for comparing plans.
None of these are showpieces: they are small motions on pages that sell things. Our Slide In On Scroll below is a pure-CSS version of the fly-in idea: a view() timeline slides the element in as it enters and back out if you scroll up.
Watch out for: The CPU figures are the companies' own reported results on Chrome's blog, not independent measurements. Older Firefox and Safari versions still need a fallback; the article points to the scroll-timeline polyfill and an @supports (animation-timeline: scroll()) check.
2. scroll-driven-animations.style by Bramus: Best for learning view() and animation-range by example
Platform: HTML + CSS demos, Apache 2.0
Bramus, a Chrome Developer Relations engineer, keeps the reference collection for the CSS scroll-driven animations spec. It has around 19 demos, many in both CSS and WAAPI versions: a reading progress indicator, image reveal effects, stacking cards, a horizontal scroll section, a shrinking header with shadow, scroll shadows and a Cover Flow carousel. Unsupported browsers get a notice and the polyfill.
The real gem is the tools. The View Timeline Ranges Visualizer shows what entry, exit, contain and cover mean as you scroll a box through the viewport, which turns animation-range from guesswork into something you can see. Our Reveal Up On Scroll below is a pure-CSS take on the image-reveal pattern, a clip-path inset wiping up from the bottom edge.
Watch out for: These are teaching demos, not drop-in components. Check each one for a prefers-reduced-motion rule before you lift it into production, and add one if it is missing.
3. Our Fade In On Scroll: Best for the one section reveal every landing page needs
Platform: Motions directory, free, pure CSS Ours
The quiet workhorse: the element fades in and rises 1.75em as it scrolls into view, with no JavaScript. Inside @supports (animation-timeline: view()), the keyframes are tied to the element's view timeline over an animation-range of entry 10% to cover 30%, so the motion finishes well before the element reaches the middle of the screen.
It also plays once on load as an ordinary 0.9s animation, so browsers without scroll timelines still see the entrance rather than a blank space. Every snippet in the directory ships a reduced-motion rule that skips straight to the end state. If you only need fade-ups, this replaces a whole animate-on-scroll library.
Watch out for: Do not put scroll reveals on content above the fold or on your LCP element. Fading in the first thing people see makes the page feel slower, and anything that starts invisible risks looking broken if CSS loads late.
4. GSAP ScrollTrigger: Best for pinned sections and scrubbed timelines on agency sites
Platform: GSAP (free, including commercial use)
ScrollTrigger is the go-to JavaScript tool for pinned and scrubbed scroll scenes. scrub: true ties a timeline to the scrollbar, and a number such as scrub: 1 adds smoothing, the seconds the playhead takes to catch up. pin holds a section in place while its timeline plays and adds spacing so the next section is not overlapped. snap settles on progress values or timeline labels, and markers: true draws the start and end lines while you debug.
Licensing is now simple: GSAP's standard license makes the whole library free for everyone, commercial use and former members-only plugins like SplitText included. The one prohibited use is building a no-code visual animation tool that competes with Webflow, which maintains GSAP.
Our Rotate In On Scroll below scrubs a single element with CSS alone. That covers the simple scrub cases; pinning a multi-step scene is still where ScrollTrigger earns its place.
Watch out for: Create triggers in page order, top to bottom, or pinned sections will throw off later positions. Call ScrollTrigger.refresh() after layout changes, never animate the pinned element itself (animate its children), and know that a transformed ancestor can break pinning.
5. Motion's scroll() and inView: Best for React and vanilla JS apps that want a small scroll API
Platform: Motion (formerly Framer Motion), JavaScript or React
Motion splits the job in two, and the split is worth learning even if you never use it. A scroll-linked animation binds a value straight to scroll progress, which is what the 3.8kb scroll() function does. A scroll-triggered animation starts or stops when an element enters or leaves the viewport, which is inView's job.
The quiet advantage is that scroll() hands supported animations to the browser's ScrollTimeline API where it can, for hardware-accelerated performance, so you get the CSS speed with a JavaScript API. Our Blur In On Scroll below is a pure-CSS scroll-linked version of the same kind of focus-in effect.
Watch out for: Scroll-linked values that update React state on every frame will re-render your components constantly. Use motion values and transforms rather than state, and keep blur, which is heavier to paint than opacity, to a few elements.
6. AOS (Animate On Scroll): Best for WordPress and Bootstrap sites that need reveals today
Platform: JavaScript + CSS, MIT, about 28k GitHub stars
AOS is the library most people meet first. You add data-aos="fade-up" to an element, call AOS.init(), and it plays one of its fade, flip or zoom animations when the element scrolls into view. Per-element attributes set duration, delay, easing, offset, the anchor element and placement, and a once setting stops it replaying.
It is still a reasonable pick for a template-based site where you cannot touch the build. If all you need is fade-ups, though, our Fade In On Scroll above does it in CSS with no script to load.
Watch out for: The GitHub README now documents aos@next and points to a separate v2 branch for the last stable release, with hundreds of open issues. Its CSS sets animated elements to opacity: 0 until the script adds its class, so a slow or blocked script leaves gaps in the page.
7. Lenis by darkroom.engineering: Best for smooth scrolling under WebGL and parallax sites
Platform: JavaScript, MIT, under 5kb
Lenis is a smooth-scroll layer from the studio darkroom.engineering. It wraps the browser's own scroll rather than faking one, so position: sticky, anchor links and accessibility keep working, and it keeps WebGL scenes and the DOM moving in sync frame for frame.
It also gets reduced motion right by default: with prefers-reduced-motion set, smoothing is turned off so the page tracks the wheel or trackpad one to one, and programmatic scrolls jump instantly.
Watch out for: Its own README lists the limits: smoothing is capped at 60fps on Safari and 30fps in low power mode, it stops working over iframes, and position: fixed can lag on older Intel Macs in Safari. Smooth scroll also changes how your site feels to every visitor, so ask whether you need it at all.
8. fullPage.js, as used on Interior Define: Best for one-screen-at-a-time product stories and pitches
Platform: JavaScript, paid tiers for commercial plans
fullPage.js turns a page into full-screen sections that snap one at a time, with adjustable speed and easing, horizontal slides, navigation bullets and a parallax extension. Its author's blog lists the furniture brand Interior Define as a site built with fullPage.js and its parallax extension, with a mountain scene that fades as you scroll.
Snapping is right when each section is a single idea: a product launch, a pitch, a portfolio of five projects. It is wrong for long reading pages, where people want to scroll at their own speed.
Watch out for: Scroll-jacking takes control away from the reader, and it fights trackpads, keyboard paging and screen magnifiers. Try native CSS scroll-snap first, which gives you snapping without a library or a license.
9. Scrollama and The Pudding's "Women's Pockets are Inferior": Best for data journalism and step-by-step explainers
Platform: Scrollama (JavaScript, MIT) + any chart library
Scrollytelling is the pattern where a graphic stays put while text steps scroll past and change it. Russell Samora's Scrollama handles only the stepping: it uses IntersectionObserver instead of scroll events to fire step enter, step exit and progress callbacks, and leaves the drawing to D3 or anything else.
Its README lists The Pudding's Women's Pockets are Inferior by Jan Diehm and Amber Thomas among the projects using it. That story is worth studying for one detail: it opens by warning "Heads up, you're about to experience some scroll-driven animations" and offers a link to skip to the final state.
Watch out for: Scrollytelling is heavy to build and easy to break on small screens, where the sticky graphic and the text fight for room. Design the mobile layout first, and copy The Pudding's skip link.
10. Framer University's 10 scroll animations: Best for designers shipping scroll effects in Framer, no code
Platform: Framer (no-code)
If you build in Framer, this September 2026 roundup shows what its scroll transforms and sticky frames can do without code: a recreation of the Fey website's scroll sequence, a text reveal that highlights words as you scroll, a zoom effect, a ticker that responds to scrolling instead of autoplaying, a 3D spiral of cards and a horizontal scrolling section.
Most are Framer University resources, some with step-by-step tutorials, so it is the fastest route from "I like that" to a working page if Framer is already your tool.
Watch out for: The roundup does not cover performance or reduced motion, and Framer's scroll effects only work inside Framer sites. Check each effect on a phone, where sticky 3D sections are the first thing to stutter.
11. Awwwards: Best Scroll Websites: Best for finding award-level references before you design
Platform: Website gallery, free to browse
The Scrolling category on Awwwards collects sites tagged for their scrolling, with recent Sites of the Day mixed in, so it stays current in a way static listicles do not. It is the place to see where studios are taking pinned scenes, horizontal sections and WebGL scroll this year.
Pick two or three sites, open them on your phone as well as your laptop, and note what moves, what stays still and how long each sequence holds you.
Watch out for: Award sites are built to impress a jury, often with heavy WebGL and long intros. Borrow one idea per project, not the whole approach, and measure your page speed after you do.
12. Our Scale Up On Scroll: Best for cards, screenshots and stats that should grow into place
Platform: Motions directory, free, pure CSS Ours
The element grows from 60 percent and fades in as it enters the viewport, scrubbed by a view() timeline over entry 0% to cover 35%. Scroll back up and it shrinks again, because the animation follows the scroll position rather than playing once. In browsers without scroll timelines, the load-time copy lands with a small overshoot instead.
It is one of six scroll-triggered entries in the Keyframe Animations directory, alongside fade, slide, blur, rotate and clip-path reveal. For headline reveals, pair them with the Text Reveal Animations collection.
Watch out for: Scale changes look large on big elements. Keep it for cards and images under about half the viewport, and avoid it on text blocks, where growing letters are hard to read mid-scroll.
How to choose a scroll animation
Match it to the job
Revealing sections as they arrive is a CSS job now: Fade In On Scroll or the patterns on scroll-driven-animations.style. Progress bars, shrinking headers and parallax are scrubbed effects, also CSS with scroll(). A pinned story where the page holds still for several steps needs ScrollTrigger or Scrollama. Apple-style frame sequences are their own technique, covered in our Apple scroll guide.
Match it to the stack
Per MDN's compatibility data, animation-timeline with scroll() and view() ships in Chrome and Edge 115, Safari 26 and Firefox 159, released October 27, 2026. That makes CSS the default for new work, with an @supports check and a time-based fallback for older browsers. Already on GSAP? Keep it. In React, Motion's scroll() uses the same browser timeline under the hood. On Framer or Webflow, use the built-in scroll tools rather than fighting them.
Match it to the reader
Scroll-linked motion and parallax are classic triggers for people with vestibular disorders, because the movement is tied to their own scrolling. Every scroll effect needs a prefers-reduced-motion path that shows the end state, nothing important should start invisible, and pinned sections should be short and skippable. Keep reveals off the first screen so they never delay what people came to see. Our guide to web animation best practices goes deeper.
Add your first scroll animation this afternoon
Start small. Pick one section below the fold, copy Fade In On Scroll or another scroll-triggered snippet, and scroll your page on a phone. Reach for GSAP only when you need something to pin.
If you want an effect none of these cover, describe it to the creator. It asks a few quick questions while it works and returns production-ready CSS keyframes, which you can refine in chat until the timing is right.
Make a scroll animation for the feature cards on a SaaS landing page. Each card rises 24px, fades in and straightens from a 4 degree tilt as it enters the viewport, finishing by the time it is 35% into view. Use pure CSS: animation-timeline: view() inside @supports, with a 600ms ease-out load-time fallback for browsers without scroll timelines. Stagger the three cards by 80ms with a custom property. Under prefers-reduced-motion, show the cards in place with no movement.
Common questions
Can you make scroll animations with only CSS?
Yes. animation-timeline: view() runs keyframes as an element passes through the viewport, and animation-timeline: scroll() ties them to the scroll position of the page or a container. animation-range sets where the animation starts and ends. MDN's compatibility data lists support in Chrome and Edge 115, Safari 26 and Firefox 159.
What is the difference between scroll-triggered and scroll-linked animations?
A scroll-triggered animation plays on its own clock once an element enters the viewport, like an AOS fade-up. A scroll-linked (or scrubbed) animation is bound to scroll progress, so it moves forward and backward as you scroll, like a reading progress bar. Motion's docs use exactly this split: inView for triggered, scroll() for linked.
Do scroll animations hurt performance or SEO?
They can. JavaScript scroll listeners run on the main thread; Tokopedia reported average CPU while scrolling falling from about 50% to 2% after moving to CSS scroll-driven animations. Content that starts invisible or animates your largest element can also delay Largest Contentful Paint, so keep reveals below the fold and animate only transform and opacity where you can.
Is GSAP ScrollTrigger free?
Yes. GSAP's standard license makes the entire library, ScrollTrigger and former members-only plugins like SplitText included, free for everyone, including commercial projects. The one restriction is using it to build a no-code visual animation tool that competes with Webflow.
How do I respect reduced motion with scroll animations?
Wrap scroll effects in @media (prefers-reduced-motion: no-preference), or add a reduce rule that shows every element in its final state. Turn off smooth scrolling for those users too; Lenis does this by default. Never hide content behind an animation that will not run.
Sources
- Chrome for Developers: Scroll-driven animations case studies
- MDN: animation-timeline
- scroll-driven-animations.style by Bramus
- GSAP ScrollTrigger docs
- GSAP standard license
- Motion: scroll()
- AOS on GitHub
- Lenis on GitHub
- fullPage.js
- Alvaro Trigo: scrolling animation examples
- Scrollama on GitHub
- The Pudding: Women's Pockets are Inferior
- Framer University: 10 scroll animations
- Awwwards: Best Scroll Websites