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.
Unlock everything for £39
All 89 premium effects and templates, plus every future effect and template we release. That's £0.43 per item.
Buy individually now: up to £10 comes off the Vault later
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.
- 01
Load GSAP and ScrollTrigger
Add the GSAP core and the ScrollTrigger plugin, then register the plugin once before using it.
- 02
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%".
- 03
Animate transform and opacity
Tween y and opacity rather than top or height so the animation runs on the compositor and stays smooth.
- 04
Respect reduced motion
Wrap the tween in gsap.matchMedia with a prefers-reduced-motion query so it is skipped for users who opt out.
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
| Effect | What it does | Built with | Difficulty |
|---|---|---|---|
| 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 sequence that lifts into real page content, with Editorial, Serif, and Mono visual 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 | Pinned chapters that hold the viewport while their words assemble on the scroll, with a velocity lean that smears the whole block on a flick. | ScrollTrigger, scroll-hijack | intermediate |
| Scroll Image Sequence | Cinematic canvas frame scrubbing with an expanding aperture, synchronized chapter crossfades, and reversible scroll progress. | ScrollTrigger, scrub | intermediate |
| Scroll Progress Indicator | A precise GSAP reading-progress instrument with bar, ring, side rail, percentage, and active chapter feedback. | 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 editorial rail where vertical scroll sweeps through horizontal chapters with measured snap, counter-drift parallax, and a precise progress readout. | 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 separates its background photograph, copy, and foreground card into distinct scroll depths from a single scrubbed ScrollTrigger. | 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 editorial 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 |
| 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
Animate on Scroll: 3 Approaches Compared
Learn to trigger animations on scroll. Compare CSS scroll animations, Intersection Observer, and GSAP ScrollTrigger to find the right approach.
Read guide
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.
Read guide
Apple-Style Scroll Image Sequences
Create a scroll-driven image sequence that plays through frames as users scroll. Uses GSAP ScrollTrigger and canvas for smooth frame-by-frame playback.
Read guide
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.
Read guideFrequently 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.