Scroll is the one interaction every visitor performs. When the page reacts to it — text typing itself out, a line drawing across the screen, a 3D object assembling as you move down — the page stops feeling like a static document and starts feeling like something you're driving. Below are 10 free scroll-animation snippets you can preview live and copy in seconds: an Apple-style image sequence, a scrubbed typewriter, a self-drawing SVG path, stacking cards, a scrollytelling chart, two scroll-driven Lottie animations, a horizontal 3D gallery, a neon tunnel flythrough, and a shatter-and-assemble reveal.
Each one comes with how the effect actually works, when to reach for it, and a quick tip for adapting it. They span the full range of techniques — pure CSS sticky positioning, GSAP ScrollTrigger, canvas frame-scrubbing, Lottie players, and WebGL — but they all share one idea: the scrollbar is the timeline, so the animation plays forward as you scroll down and backward as you scroll up.
Every snippet below is a live, interactive preview — scroll inside it and try the effect right in the article. When you find one you like, hit View / Edit Code to grab the HTML/CSS/JS or export it to React, Vue, Angular or Tailwind.
What actually makes a scroll animation work
Before picking an effect, it helps to know what separates a scroll animation that feels premium from one that feels gimmicky. Regardless of which of the ten below you choose, the good ones share three traits:
- The scrollbar is the playhead, not a trigger. The best scroll effects are scrubbed — their progress is tied directly to scroll position, so they run backward when you scroll up. That reversibility is what makes them feel physically connected to your input rather than fired once and forgotten.
- Motion serves the content. An animation that draws a line between two steps, reveals a stat as you reach it, or assembles a product as it's described earns its place. Motion with no relationship to the copy beside it is just noise.
- It stays smooth on real devices. Scrubbed effects run on every frame, so they animate cheap properties — transforms, opacity, a canvas draw — and never trigger layout on scroll.
Keep that in mind as you scroll — every snippet below is scroll-driven and reversible, and you can borrow the underlying technique even if you don't use the exact demo.
1. Scroll Image Sequence
The technique behind Apple's AirPods and MacBook pages: an animation rendered as individual frames and drawn to a canvas, with the scrollbar acting as the playhead so the sequence plays frame by frame as you scroll.
How it works: a set of frames is preloaded, and GSAP's ScrollTrigger scrubs a single frame-index value from the first frame to the last as you scroll through a pinned section. Whichever frame that value lands on is painted to a <canvas> with drawImage, so only one image is ever on screen and the "video" is really just the right still for your scroll position. Because it's scrubbed, scrolling back up plays the sequence in reverse with no extra code.
Best for: product reveals, hardware and device pages, and hero sections that want cinematic weight without an actual video file. Tip: render your sequence at the display size you need and preload every frame before the effect starts — the whole illusion depends on the next frame already being decoded when the scroll reaches it.
Grab the code: Scroll Image Sequence
2. Scroll Typewriter
The classic typing animation turned into a scrubbed one: characters appear one by one as you scroll down, and un-type — caret and all — when you scroll back up.
How it works: GSAP ScrollTrigger scrubs a character count from zero to the length of the string as you move through a pinned section, and each frame the snippet shows just that many characters with a blinking caret at the end. Nothing is on a timer, so the reversibility is free — scroll up and the value shrinks, deleting characters one at a time. It's the same scrubbing idea as the image sequence, applied to text instead of frames.
Best for: landing-page headlines, terminal and code-tool demos, and story sections where a line should "type" into place as the reader arrives. Tip: keep the underlying text a real, complete text node and reveal a slice of it — that way it stays selectable and readable by screen readers even mid-animation.
Grab the code: Scroll Typewriter
3. Scroll SVG Path Draw
A winding line or route that appears to draw itself stroke by stroke as you scroll — the technique behind animated roadmaps, timelines, and "how it works" sections.
How it works: the SVG path is given a stroke-dasharray equal to its own total length, so the entire stroke is one long dash followed by an equal gap. GSAP ScrollTrigger then scrubs the stroke-dashoffset from the full length down to zero as you scroll, sliding the dash into view so the line appears to draw. Reverse the scroll and the offset grows again, un-drawing the path.
Best for: process and roadmap sections, journey maps, and timelines where each waypoint should be revealed as the reader reaches it. Tip: attach labels or markers along the path and fade each one in as the draw passes it, so the line and its annotations reveal together instead of the text appearing all at once.
Grab the code: Scroll SVG Path Draw
4. Stacking Scroll Cards
Full-width cards pin to the top of the viewport one after another, and as you keep scrolling the next card slides up to cover the previous one — which shrinks back like a card going into a deck.
How it works: each card uses position: sticky with a top offset, so it sticks to the top of the viewport while its section scrolls past, and the next sticky card rides up over it. A small scale-down on the outgoing card makes it recede like it's slipping into a stack rather than being flatly hidden. The whole effect is CSS-first — no library needed for the core stacking.
Best for: feature walkthroughs, step-by-step storytelling, and pricing or plan comparisons where each card deserves a full moment on screen. Tip: give each card a slightly different top offset so a sliver of the previous card peeks out above the current one — that visible edge is what reads as a real physical stack.
Grab the code: Stacking Scroll Cards
5. Scrollytelling Chart
The data-journalism pattern popularized by the New York Times and The Pudding: narrative steps scroll up one column while a sticky chart beside them morphs to illustrate each step, so the reader controls the pace and the chart always matches the paragraph in view.
How it works: the chart sits in a position: sticky column so it stays fixed on screen while the text steps scroll past it. Each step is tracked as it scrolls into view, and as one becomes active the chart transitions to that step's data — bars regrow, a line redraws, a series highlights. Because the active step is derived from scroll position, scrolling back up returns the chart to the previous state exactly.
Best for: data stories, annual reports, and explainer sections where numbers need narration rather than a static chart the reader has to interpret alone. Tip: animate only between the states you actually narrate — a chart that morphs on every pixel of scroll is distracting; one that settles clearly on each step's data is readable.
Grab the code: Scrollytelling Chart
6. Lottie Scroll Scrub
A Lottie animation played with the scrollbar instead of a clock: as you scroll a pinned section, a progress ring draws itself around a circle and a checkmark strokes in at the end, rewinding when you scroll back up.
How it works: the animation loads with autoplay: false so its internal timer never runs, and GSAP ScrollTrigger scrubs a 0-to-1 value that is mapped onto the animation's frame range. Every frame the snippet calls goToAndStop(frame, true) to seek that exact frame, so scroll position — not time — decides what's on screen. The drawing effect itself is a Lottie trim path animating from 0 to 100 percent.
Best for: scroll-to-complete progress, onboarding steps, and any section where a designer-made vector animation should advance in step with the copy. Tip: the animation here is inline JSON, but you can point the player at your own exported .json file and the scroll logic stays identical.
Grab the code: Lottie Scroll Scrub
7. Lottie Scroll Donut Chart
A multi-color donut that fills one segment at a time as you scroll — each colored slice sweeping in from where the last one ended — and empties again on the way back up.
How it works: the donut is one thick stroked ring copied into several segments, each trimmed to its own slice with a Lottie trim path. Every segment draws during its own window of the timeline — sized in proportion to its value and laid end to end — so the slices fill in sequence rather than all at once. As with every scrubbed effect here, ScrollTrigger drives the frame and scrolling up un-draws the segments in reverse.
Best for: budget, market-share, and usage breakdowns, dashboard accents, and report sections where each portion deserves its own beat. Tip: the whole chart is generated from one values array — feed it your real proportions and the segment sizes, colors, and draw order adapt automatically.
Grab the code: Lottie Scroll Donut Chart
8. Three.js Scroll Horizontal Gallery
Plain vertical page scroll turned into a horizontal pan across a strip of 3D panels — the scrollbar slides the whole gallery sideways while each panel rotates coverflow-style toward the camera as it reaches center.
How it works: the panels live in a WebGL scene, and GSAP ScrollTrigger scrubs a value that slides the whole group sideways as you scroll a pinned section vertically. Each panel's rotation is derived from its distance to the center, so it turns to face the camera as it arrives and angles away as it leaves, giving the coverflow tilt. Vertical scroll in, horizontal motion out — with full reversibility.
Best for: portfolios, product line-ups, and case-study galleries that want a tactile, three-dimensional browse instead of a flat carousel. Tip: keep the panel count modest and the textures reasonably sized — a horizontal 3D strip is most striking when each panel is crisp and the motion stays perfectly smooth.
Grab the code: Three.js Scroll Horizontal Gallery
9. Three.js Scroll Tunnel Travel
The visitor is dropped inside a glowing wireframe tube and flown down its length as they scroll — the scrollbar drives the camera directly along a curved 3D path, past neon rings, for a genuine sense of forward speed.
How it works: a single curve is used twice — once to extrude the tube geometry you fly through, and again as the exact path the camera travels — so the camera is always perfectly centered inside the tunnel. ScrollTrigger scrubs one 0-to-1 value that walks the camera along that curve, and the camera looks at a point sampled slightly ahead so it banks naturally into every bend. Neon rings threaded along the path streak past to sell the speed.
Best for: immersive landing intros, game and esports promos, and music or event pages that want a high-energy scroll journey. Tip: reshape the tunnel by editing the control points of the curve — because the geometry and the camera share it, the walls and the flight path update together automatically.
Grab the code: Three.js Scroll Tunnel Travel
10. Three.js Scroll Shatter & Assemble
Dozens of glowing crystal fragments start flung apart in space and, as you scroll through a pinned stage, fly inward until every piece locks into its exact position and orientation to form a solid shape.
How it works: every fragment stores both a scattered start transform and a target position and rotation on the assembled surface. ScrollTrigger scrubs a single 0-to-1 value, and each frame every fragment's position is interpolated between its start and target while its rotation is smoothly slerped, so scrolling assembles the object and scrolling back explodes it apart again. A three-light rig gives the crystal shards their glassy, faceted shading.
Best for: product and brand reveals, launch pages, and hero moments where an object should feel like it's being constructed as the visitor scrolls into it. Tip: the assembled target is just a set of points on a shape — swap it for your own logo or product silhouette and the same fly-in-and-lock motion reassembles that instead.
Grab the code: Three.js Scroll Shatter & Assemble
How to drop these into your project
Every snippet is framework-agnostic, so the workflow is the same wherever you're building:
- Open the snippet and hit View / Edit Code to see the HTML, CSS and JS in separate tabs, plus any CDN scripts it needs (GSAP, Three.js, or lottie-web).
- Paste the HTML into your markup, the CSS into your stylesheet, and the JS before your closing
</body>tag — and add the CDN script tags for the heavier effects. - Prefer a component? Use the one-click export to React, Vue, Angular or Tailwind, and remember to register the ScrollTrigger in a mount effect and clean it up on unmount.
- Swap the placeholder content — frames, copy, chart data, 3D target shape — for your own before shipping. Every one of these is a starting point, not a finished section.
Keep your scroll animations fast and accessible
A scroll effect that looks great but janks the page or excludes users isn't doing its job. Three rules cover almost every case:
- Scrub, don't fire-and-forget. Tie progress to scroll position (a numeric ScrollTrigger scrub, or seeking a frame) rather than starting a fixed-duration animation on entry — that's what makes an effect reversible and feel connected to the user's input.
- Respect
prefers-reduced-motion. For heavy 3D or fast-moving effects, offer a reduced or static fallback for visitors who've asked for less motion, and never trap them in a long pinned section they can't scroll past. - Clean up on unmount. In a framework, kill ScrollTrigger instances and call
renderer.dispose()oranim.destroy()when the component leaves, so pins, WebGL contexts, and scroll listeners don't leak between pages.
Final Thought
These ten span every layer of the stack — a pure-CSS sticky stack, a GSAP-scrubbed typewriter, a canvas image sequence, two scroll-driven Lottie animations, and three WebGL scenes — but they're all the same idea underneath: make the scrollbar the timeline, and derive everything on screen from one scrubbed value. Once that clicks, you stop thinking of scroll animations as separate tricks and start seeing them as one technique pointed at different content — text, an SVG path, a chart, a Lottie frame, or a 3D camera.
Preview any of them live, tweak the code, and export to your framework of choice in one click. Browse the full collection at FWD Tools UI Snippets — Scroll Effects — it's free and runs entirely in your browser.
