GSAP scroll animation examples
Every example in this category runs on GSAP ScrollTrigger, most of them over Lenis smooth scrolling, and they fall into a few families. Pinned sequences hold a section in place while a timeline scrubs through it: zoom-out heroes, masked portrait reveals, products that explode into labelled parts. Clip-path and mask reveals open an image or a video as it enters the viewport, the cheapest way to add drama to a long page. Sticky card stacks and horizontal sections turn vertical scrolling into another direction of travel, which suits case studies and timelines.
SVG stroke drawing ties a line to scroll progress, useful for paths, diagrams and signatures. Canvas image sequences and Lottie scrubbing play frame-by-frame animation under the scroll, the technique behind product launch pages. A few go further with Three.js scenes or Matter.js physics. As a rule, scrub the animation when the reader should set the pace, and use a one-shot reveal when the content only needs an entrance.
The examples
Other categories
- GSAP menu animation examples
- GSAP slider and carousel examples
- GSAP hover effect examples
- GSAP text animation examples
- GSAP preloader examples
- Page transition examples: GSAP, Barba.js and View Transitions
- GSAP image gallery examples
- GSAP card animation examples
- Three.js and WebGL effect examples
- Interactive cursor and physics effects
- Animated footer examples