GSAP Scroll Animations

Scroll-driven animations that respond to the user as they navigate. Built with GSAP ScrollTrigger for pinning, scrubbing, and triggering at precise scroll positions.

36 effects, 5 free, no build step

Effects Pass

£50

Every current and future premium effect. Includes 99 items now, plus every future release in this line.

The Vault

£99

All 236 premium items in the Vault library, plus future additions to the library.

Browse effects

Receipt Printer Scroll - Scroll to feed a receipt up out of a thermal printer line by line: the strip droops and curls towards you, flutters with scroll speed, then tears at the perforation and lands on the counter
102 New £5

Receipt Printer Scroll

Scroll to feed a receipt up out of a thermal printer line by line: the strip droops and curls towards you, flutters with scroll speed, then tears at the perforation and lands on the counter.

ScrollTrigger scrub
Scroll Hotspot Tour - A scroll-driven visual story that travels through one large image, flows between chapters and connects every event to its location with an accurate numbered timeline
087 New £5

Scroll Hotspot Tour

A scroll-driven visual story that travels through one large image, flows between chapters and connects every event to its location with an accurate numbered timeline.

ScrollTrigger scroll-scrub
Image Transition Slider - A pinned photographic sequence where portrait panels rise, expand into panoramas and carry oversized project titles through the scroll
083 New £5

Image Transition Slider

A pinned photographic sequence where portrait panels rise, expand into panoramas and carry oversized project titles through the scroll.

ScrollTrigger scroll-scrub
Laptop Screen Scroll - A laptop opens on scroll, fills the viewport, then becomes the live website you keep scrolling through
080 New Premium £10

Laptop Screen Scroll

A laptop opens on scroll, fills the viewport, then becomes the live website you keep scrolling through.

ScrollTrigger webgl-shader
Serpentine Text Scroll - Oversized lettering flows around an S-shaped path that pulls taut as you scroll and springs back into a deep curve
076 £5

Serpentine Text Scroll

Oversized lettering flows around an S-shaped path that pulls taut as you scroll and springs back into a deep curve.

ScrollTrigger text-animation
Type Helix - Turn oversized lettering into a scrolling spiral with hollow rear faces and spring-loaded coils
077 £5

Type Helix

Turn oversized lettering into a scrolling spiral with hollow rear faces and spring-loaded coils.

ScrollTrigger text-animation
Folded Type Scroll - A giant printed headline unfolds from a connected paper concertina as you scroll, with dimensional hinges and soft elastic tension
078 £5

Folded Type Scroll

A giant printed headline unfolds from a connected paper concertina as you scroll, with dimensional hinges and soft elastic tension.

ScrollTrigger text-animation
Exploded View Scroll - A pinned product stack that separates into an exploded assembly diagram as you scroll, with layers that tilt into three-quarter view, callouts that draw in, and a velocity overshoot that springs back
067 £5

Exploded View Scroll

A pinned product stack that separates into an exploded assembly diagram as you scroll, with layers that tilt into three-quarter view, callouts that draw in, and a velocity overshoot that springs back.

ScrollTrigger exploded-view
Scroll Timeline Chronicle - A scroll-scrubbed vertical chronology: entries magnetically hang in a reading band and ease through the handoff while a drawn spine, an odometer year and a depth-blur falloff all react to the same scroll
063 £5

Scroll Timeline Chronicle

A scroll-scrubbed vertical chronology: entries magnetically hang in a reading band and ease through the handoff while a drawn spine, an odometer year and a depth-blur falloff all react to the same scroll.

ScrollTrigger scrub
Chrono Rail Timeline - A pinned horizontal timeline where vertical scroll drives a chronology of full dated entries past a fixed playhead, with a velocity blur, ruler era marks and a straight gliding settle
064 £5

Chrono Rail Timeline

A pinned horizontal timeline where vertical scroll drives a chronology of full dated entries past a fixed playhead, with a velocity blur, ruler era marks and a straight gliding settle.

ScrollTrigger horizontal-scroll
Isometric Scroll Wall - A wall of poster tiles laid on an isometric plane, adjacent lanes travelling in opposite directions and wrapping forever as you scroll, with a hard flick banking the whole plane and any tile pulling square to the viewer on a click
059 £5

Isometric Scroll Wall

A wall of poster tiles laid on an isometric plane, adjacent lanes travelling in opposite directions and wrapping forever as you scroll, with a hard flick banking the whole plane and any tile pulling square to the viewer on a click.

ScrollTrigger isometric
Scroll Depth Corridor - A corridor of panels receding into depth that the camera flies through as you scroll, wrapping from far to near so it never ends, with a hard flick opening the field of view and streaking the whole corridor past a headline that holds dead still at the vanishing point
058 £5

Scroll Depth Corridor

A corridor of panels receding into depth that the camera flies through as you scroll, wrapping from far to near so it never ends, with a hard flick opening the field of view and streaking the whole corridor past a headline that holds dead still at the vanishing point.

ScrollTrigger 3d-transforms
Editorial Scrollytelling - A sticky editorial media rail that morphs between section-defined aspect ratios with Flip, directional image wipes, layered drift and a velocity-reactive settle while the prose stays in normal document flow
057 £5

Editorial Scrollytelling

A sticky editorial media rail that morphs between section-defined aspect ratios with Flip, directional image wipes, layered drift and a velocity-reactive settle while the prose stays in normal document flow.

ScrollTriggerFlip
Scroll Morph Mask Video - A looping surf film that never stops playing, seen through a vector mask that scroll morphs from a mark into the letterforms of a word, then zooms through a letter to full bleed
056 £5

Scroll Morph Mask Video

A looping surf film that never stops playing, seen through a vector mask that scroll morphs from a mark into the letterforms of a word, then zooms through a letter to full bleed. Flick and the mask breathes: it inflates, the edge splits into an accent and a chalk fringe, and the footage speeds up.

ScrollTriggerMorphSVG
Liquid Fill Reveal - A scroll-scrubbed liquid fills a frame behind your content, with a simulated wave surface that sloshes on a fast scroll and inverts everything below the waterline
054 £5

Liquid Fill Reveal

A scroll-scrubbed liquid fills a frame behind your content, with a simulated wave surface that sloshes on a fast scroll and inverts everything below the waterline.

ScrollTrigger scrub
Split-Screen Hero Handoff - A cinematic video hero that opens as six alternating vertical shutters, pulling its headline apart and revealing real page content through the seams
041 £5

Split-Screen Hero Handoff

A cinematic video hero that opens as six alternating vertical shutters, pulling its headline apart and revealing real page content through the seams.

ScrollTrigger canvas
Scroll Sequence Hero Transition - A scroll-scrubbed canvas image sequence hero that lifts into real page content, with Editorial, Serif, and Mono typographic presets
040 £5

Scroll Sequence Hero Transition

A scroll-scrubbed canvas image sequence hero that lifts into real page content, with Editorial, Serif, and Mono typographic presets.

ScrollTrigger image-sequence
Scroll Video Scrub - Scroll drives a real video's playhead frame-by-frame while a horizontal track of chapters pans across the pinned footage
033 £5

Scroll Video Scrub

Scroll drives a real video's playhead frame-by-frame while a horizontal track of chapters pans across the pinned footage. Apple-keynote scrub, one MP4 and a tween.

ScrollTrigger video-scrub
Scroll Hijack Sections - Five pinned editorial chapters that assemble word by word as you scroll
011 £5

Scroll Hijack Sections

Five pinned editorial chapters that assemble word by word as you scroll. Slides from both edges, a vertical rise and a blur-to-sharp reveal, with a velocity lean that settles after every flick.

ScrollTrigger scroll-hijack
Scroll Story Flow - Pinned photographic stories with oversized single-line text travelling across the viewport, image wipes, parallax and custom easing
068 £5

Scroll Story Flow

Pinned photographic stories with oversized single-line text travelling across the viewport, image wipes, parallax and custom easing. Scroll down through three expressive scenes.

ScrollTriggerCustomEase
Scroll Image Sequence - Cinematic canvas frame scrubbing with an expanding aperture, synchronized caption crossfades, and reversible scroll progress
015 £5

Scroll Image Sequence

Cinematic canvas frame scrubbing with an expanding aperture, synchronized caption crossfades, and reversible scroll progress.

ScrollTrigger scrub
Scroll Progress Indicator - A precise GSAP reading-progress indicator in four shapes: a top bar, an SVG ring, a side rail, and a numeric percentage
f02 Free

Scroll Progress Indicator

A precise GSAP reading-progress indicator in four shapes: a top bar, an SVG ring, a side rail, and a numeric percentage.

ScrollTrigger scroll-progress
CSS Scroll Reveal - Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript
c01 Free

CSS Scroll Reveal

Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript.

scroll-revealscroll-driven-animation
Elastic Stack Cards - Stacked cards that spring open into a fan
013 £5

Elastic Stack Cards

Stacked cards that spring open into a fan. Three fan shapes, opened by hover, focus, tap or an external button, with click-to-front card selection.

ScrollTrigger hover-effect
Stagger Grid Reveal - Directional GSAP grid reveals that send tiles through corner, center, edge, axis, or random waves with cinematic rotation, scale, blur, and optional focus-aware tilt
010 £5

Stagger Grid Reveal

Directional GSAP grid reveals that send tiles through corner, center, edge, axis, or random waves with cinematic rotation, scale, blur, and optional focus-aware tilt.

ScrollTrigger scroll-reveal
Horizontal Scroll Section - A pinned section where vertical scroll pans a row of full-viewport panels sideways, with snap to panel edges, per-element parallax and a progress readout driven by the same timeline
022 £5

Horizontal Scroll Section

A pinned section where vertical scroll pans a row of full-viewport panels sideways, with snap to panel edges, per-element parallax and a progress readout driven by the same timeline.

ScrollTrigger horizontal-scroll
SVG Line Draw on Scroll - SVG paths draw themselves as you scroll using the stroke-dasharray technique
020 £5

SVG Line Draw on Scroll

SVG paths draw themselves as you scroll using the stroke-dasharray technique. Scrubbed or play-once modes, works on any SVG shape, no DrawSVG plugin required.

ScrollTrigger svg-line-draw
Count-Up Stats - Entry- or scroll-triggered number counters with locale-aware formatting, staggered reveals, synchronized progress visuals, and optional replay
019 £5

Count-Up Stats

Entry- or scroll-triggered number counters with locale-aware formatting, staggered reveals, synchronized progress visuals, and optional replay.

ScrollTrigger scroll-reveal
Parallax Hero - A pinned hero that pulls its layers into depth from one scrubbed ScrollTrigger: a headline sandwiched inside the stack, ridges or photographs climbing over it, and a sun that sets behind the far layer
f04 Free

Parallax Hero

A pinned hero that pulls its layers into depth from one scrubbed ScrollTrigger: a headline sandwiched inside the stack, ridges or photographs climbing over it, and a sun that sets behind the far layer.

ScrollTrigger parallax
Image Clip Reveal - A cinematic image reveal where a directional polygon aperture opens as the photograph settles from a restrained Ken Burns scale and its caption lands
f05 Free

Image Clip Reveal

A cinematic image reveal where a directional polygon aperture opens as the photograph settles from a restrained Ken Burns scale and its caption lands.

ScrollTrigger scroll-reveal
Scroll Velocity Skew - Kinetic type that smears with scroll speed (shear, stretch, motion blur and chromatic fringing in one velocity-driven response) then whips back line by line with an elastic overshoot
026 £5

Scroll Velocity Skew

Kinetic type that smears with scroll speed (shear, stretch, motion blur and chromatic fringing in one velocity-driven response) then whips back line by line with an elastic overshoot.

ScrollTrigger velocity-reactive
Radial Headline Burst - A scroll-scrubbed headline that explodes each character from one centre point into crisp, readable type with a chromatic fringe and spring-like settle
066 £5

Radial Headline Burst

A scroll-scrubbed headline that explodes each character from one centre point into crisp, readable type with a chromatic fringe and spring-like settle.

ScrollTriggerSplitText
Scroll Zoom Portal - Pinned scroll section where a small framed panel zooms up to swallow the viewport, parting the headline around it, so scrolling feels like stepping through a portal into the next scene
029 £5

Scroll Zoom Portal

Pinned scroll section where a small framed panel zooms up to swallow the viewport, parting the headline around it, so scrolling feels like stepping through a portal into the next scene.

ScrollTrigger pinning
Scroll Text Highlight - A scrubbed orange-to-lime reading front lifts each active word before completed copy settles to white and unread copy remains ghosted
f07 Free

Scroll Text Highlight

A scrubbed orange-to-lime reading front lifts each active word before completed copy settles to white and unread copy remains ghosted.

ScrollTriggerSplitText
Scroll Stack Cards - Full-width panels that stack over one another as you scroll, each one locking into place with an overshoot while the cards beneath compress into a visible deck
034 £5

Scroll Stack Cards

Full-width panels that stack over one another as you scroll, each one locking into place with an overshoot while the cards beneath compress into a visible deck.

ScrollTrigger scroll-stack
Scroll Path Journey - Responsive SVG motion path storytelling with GSAP MotionPathPlugin and ScrollTrigger
025 £5

Scroll Path Journey

Responsive SVG motion path storytelling with GSAP MotionPathPlugin and ScrollTrigger. A marker follows a route drawn down the page while checkpoints activate on scroll.

ScrollTriggerMotionPathPlugin
Browse all 108 effects

Building Scroll Animations with GSAP

Scroll animations transform static pages into interactive experiences. Instead of content sitting idle until the user scrolls past, elements react to scroll position: fading in, sliding, scaling, or morphing as the viewport moves. GSAP ScrollTrigger makes this reliable across browsers and devices.

ScrollTrigger connects any GSAP animation to scroll position. You define a start point, an end point, and whether the animation plays once or scrubs continuously with scroll. This gives you fine-grained control over timing without writing scroll event listeners or calculating offsets manually.

The effects below demonstrate different scroll patterns. Section hijacking pins content while animations play. Image sequences swap frames based on scroll position. Progress indicators track reading position. Reveal animations stagger elements into view as sections enter the viewport.

Each effect includes proper cleanup, responsive breakpoints via GSAP matchMedia, and reduced-motion support. They work with or without smooth scrolling libraries like Lenis.

How to create a scroll animation with GSAP

Link any GSAP tween to scroll position with the ScrollTrigger plugin. Register the plugin, point a trigger at the element, and set where in the viewport the animation starts.

  1. 1

    Load GSAP and ScrollTrigger

    Add the GSAP core and the ScrollTrigger plugin, then register the plugin once before using it.

  2. 2

    Attach a trigger

    Pass a scrollTrigger config to any tween. Set trigger to the element and start to the point where it should begin, e.g. "top 80%".

  3. 3

    Animate transform and opacity

    Tween y and opacity rather than top or height so the animation runs on the compositor and stays smooth.

  4. 4

    Respect reduced motion

    Wrap the tween in gsap.matchMedia with a prefers-reduced-motion query so it is skipped for users who opt out.

Minimal example
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

gsap.from(".reveal", {
  scrollTrigger: {
    trigger: ".reveal",
    start: "top 80%",   // element top hits 80% down the viewport
  },
  y: 40,
  opacity: 0,
  duration: 0.8,
  ease: "power3.out",
});

Scroll Effects at a glance

Compare the 36 scroll effects in this category by what they do, technique, and difficulty.
Effect What it doesBuilt withDifficulty
Receipt Printer Scroll Scroll to feed a receipt up out of a thermal printer line by line: the strip droops and curls towards you, flutters with scroll speed, then tears at the perforation and lands on the counter. ScrollTrigger, scrub advanced
Scroll Hotspot Tour A scroll-driven visual story that travels through one large image, flows between chapters and connects every event to its location with an accurate numbered timeline. ScrollTrigger, scroll-scrub advanced
Image Transition Slider A pinned photographic sequence where portrait panels rise, expand into panoramas and carry oversized project titles through the scroll. ScrollTrigger, scroll-scrub intermediate
Laptop Screen Scroll A laptop opens on scroll, fills the viewport, then becomes the live website you keep scrolling through. ScrollTrigger, webgl-shader advanced
Serpentine Text Scroll Oversized lettering flows around an S-shaped path that pulls taut as you scroll and springs back into a deep curve. ScrollTrigger, text-animation intermediate
Type Helix Turn oversized lettering into a scrolling spiral with hollow rear faces and spring-loaded coils. ScrollTrigger, text-animation intermediate
Folded Type Scroll A giant printed headline unfolds from a connected paper concertina as you scroll, with dimensional hinges and soft elastic tension. ScrollTrigger, text-animation intermediate
Exploded View Scroll A pinned product stack that separates into an exploded assembly diagram as you scroll, with layers that tilt into three-quarter view, callouts that draw in, and a velocity overshoot that springs back. ScrollTrigger, exploded-view intermediate
Scroll Timeline Chronicle A scroll-scrubbed vertical chronology: entries magnetically hang in a reading band and ease through the handoff while a drawn spine, an odometer year and a depth-blur falloff all react to the same scroll. ScrollTrigger, scrub advanced
Chrono Rail Timeline A pinned horizontal timeline where vertical scroll drives a chronology of full dated entries past a fixed playhead, with a velocity blur, ruler era marks and a straight gliding settle. ScrollTrigger, horizontal-scroll advanced
Isometric Scroll Wall A wall of poster tiles laid on an isometric plane, adjacent lanes travelling in opposite directions and wrapping forever as you scroll, with a hard flick banking the whole plane and any tile pulling square to the viewer on a click. ScrollTrigger, isometric advanced
Scroll Depth Corridor A corridor of panels receding into depth that the camera flies through as you scroll, wrapping from far to near so it never ends, with a hard flick opening the field of view and streaking the whole corridor past a headline that holds dead still at the vanishing point. ScrollTrigger, 3d-transforms advanced
Editorial Scrollytelling A sticky editorial media rail that morphs between section-defined aspect ratios with Flip, directional image wipes, layered drift and a velocity-reactive settle while the prose stays in normal document flow. ScrollTrigger, Flip, flip-layout advanced
Scroll Morph Mask Video A looping surf film that never stops playing, seen through a vector mask that scroll morphs from a mark into the letterforms of a word, then zooms through a letter to full bleed. ScrollTrigger, MorphSVG, video-mask advanced
Liquid Fill Reveal A scroll-scrubbed liquid fills a frame behind your content, with a simulated wave surface that sloshes on a fast scroll and inverts everything below the waterline. ScrollTrigger, scrub advanced
Split-Screen Hero Handoff A cinematic video hero that opens as six alternating vertical shutters, pulling its headline apart and revealing real page content through the seams. ScrollTrigger, canvas advanced
Scroll Sequence Hero Transition A scroll-scrubbed canvas image sequence hero that lifts into real page content, with Editorial, Serif, and Mono typographic presets. ScrollTrigger, image-sequence advanced
Scroll Video Scrub Scroll drives a real video's playhead frame-by-frame while a horizontal track of chapters pans across the pinned footage. ScrollTrigger, video-scrub advanced
Scroll Hijack Sections Five pinned editorial chapters that assemble word by word as you scroll. ScrollTrigger, scroll-hijack intermediate
Scroll Story Flow Pinned photographic stories with oversized single-line text travelling across the viewport, image wipes, parallax and custom easing. ScrollTrigger, CustomEase, pinning intermediate
Scroll Image Sequence Cinematic canvas frame scrubbing with an expanding aperture, synchronized caption crossfades, and reversible scroll progress. ScrollTrigger, scrub intermediate
Scroll Progress Indicator A precise GSAP reading-progress indicator in four shapes: a top bar, an SVG ring, a side rail, and a numeric percentage. ScrollTrigger, scroll-progress beginner
CSS Scroll Reveal Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript. scroll-reveal beginner
Elastic Stack Cards Stacked cards that spring open into a fan. ScrollTrigger, hover-effect intermediate
Stagger Grid Reveal Directional GSAP grid reveals that send tiles through corner, center, edge, axis, or random waves with cinematic rotation, scale, blur, and optional focus-aware tilt. ScrollTrigger, scroll-reveal intermediate
Horizontal Scroll Section A pinned section where vertical scroll pans a row of full-viewport panels sideways, with snap to panel edges, per-element parallax and a progress readout driven by the same timeline. ScrollTrigger, horizontal-scroll intermediate
SVG Line Draw on Scroll SVG paths draw themselves as you scroll using the stroke-dasharray technique. ScrollTrigger, svg-line-draw intermediate
Count-Up Stats Entry- or scroll-triggered number counters with locale-aware formatting, staggered reveals, synchronized progress visuals, and optional replay. ScrollTrigger, scroll-reveal beginner
Parallax Hero A pinned hero that pulls its layers into depth from one scrubbed ScrollTrigger: a headline sandwiched inside the stack, ridges or photographs climbing over it, and a sun that sets behind the far layer. ScrollTrigger, parallax intermediate
Image Clip Reveal A cinematic image reveal where a directional polygon aperture opens as the photograph settles from a restrained Ken Burns scale and its caption lands. ScrollTrigger, scroll-reveal beginner
Scroll Velocity Skew Kinetic type that smears with scroll speed (shear, stretch, motion blur and chromatic fringing in one velocity-driven response) then whips back line by line with an elastic overshoot. ScrollTrigger, velocity-reactive intermediate
Radial Headline Burst A scroll-scrubbed headline that explodes each character from one centre point into crisp, readable type with a chromatic fringe and spring-like settle. ScrollTrigger, SplitText, scrub intermediate
Scroll Zoom Portal Pinned scroll section where a small framed panel zooms up to swallow the viewport, parting the headline around it, so scrolling feels like stepping through a portal into the next scene. ScrollTrigger, pinning intermediate
Scroll Text Highlight A scrubbed orange-to-lime reading front lifts each active word before completed copy settles to white and unread copy remains ghosted. ScrollTrigger, SplitText, scroll-reveal intermediate
Scroll Stack Cards Full-width panels that stack over one another as you scroll, each one locking into place with an overshoot while the cards beneath compress into a visible deck. ScrollTrigger, scroll-stack advanced
Scroll Path Journey Responsive SVG motion path storytelling with GSAP MotionPathPlugin and ScrollTrigger. ScrollTrigger, MotionPathPlugin, motion-path intermediate

Related guides

How to animate on scroll with GSAP ScrollTrigger

How to animate on scroll with GSAP ScrollTrigger: reveals, staggers, scrubbing, pinning and reduced motion, plus when CSS scroll-driven animation is enough.

Horizontal scroll sections with GSAP ScrollTrigger

Build a pinned horizontal scroll section with GSAP ScrollTrigger: pin, scrub, and a track that slides sideways as you scroll. Complete code included.

Apple-style scroll image sequences with GSAP and canvas

Build a scroll-driven image sequence with GSAP ScrollTrigger and canvas: frame preloading, WebP sizing, HiDPI rendering, and a reduced-motion fallback.

GSAP vs CSS Animations: A Practical Guide

When should you use CSS animations versus GSAP? Learn the practical differences, performance trade-offs, and when each approach makes sense.

Frequently asked questions

What is GSAP ScrollTrigger?

ScrollTrigger is a GSAP plugin that links animations to scroll position. You define trigger points in the viewport, and ScrollTrigger handles the rest: playing animations on enter, scrubbing with scroll progress, or pinning elements while content scrolls past.

Do GSAP scroll animations work on mobile?

Yes. All scroll effects here are responsive and touch-friendly. They use GSAP matchMedia to adjust behavior on smaller screens and respect the prefers-reduced-motion setting for accessibility.

Can I combine multiple scroll animations on one page?

Absolutely. ScrollTrigger handles multiple instances independently. Each effect manages its own trigger, timeline, and cleanup. You can stack scroll-triggered sections, parallax layers, and reveal animations on the same page without conflicts.

How do I prevent scroll animation jank?

Animate transform and opacity properties, which run on the compositor thread. Avoid animating width, height, or top/left. Use will-change sparingly on elements about to animate, and test on lower-powered devices to catch performance issues early.

Browse all effects What GSAP effects are
Related categories
Text AnimationsImage Animations

Your cart

Your cart is empty

The Vault £99

The Vault library, plus future additions to the library.

Or browse effects, templates or UI elements.