GSAPScrollAnimations
Scroll-driven animations that respond to the user as they navigate. Built with GSAP ScrollTrigger for pinning, scrubbing, and triggering at precise scroll positions.
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.
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 guideApple-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 guideGSAP 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.