39 GSAP ScrollTrigger Examples
Take full control of scroll-based interactivity with GSAP ScrollTrigger. This collection showcases advanced scroll animations including pinning elements, syncing timelines with scroll, horizontal scroll effects, and animated reveals - all powered by the precision and flexibility of GSAP.
Last updated:
GSAP ScrollSmoother and Three.js
An immersive scrolling experience blending smooth typography with a floating 3D particle field powered by Three.js. GSAP orchestrates the camera movement and dynamic text highlighting, creating a synchronized parallax journey.
Scroll UI Animation
As you scroll down, a large image of a field shrinks and gets cropped by white blocks to focus attention, while a heading on the left counts up the percentage of water saved, changing color for emphasis. This creates the feel of a dynamic infographic.
Smooth Scrolling with GSAP ScrollSmoother
A premium smooth-scrolling interface orchestrated by GSAP’s ScrollSmoother plugin. The layout leverages CSS Grid for overlapping compositions, while declarative data-speed attributes drive distinct parallax velocities for text and imagery, creating a layered, depth-rich browsing experience.
Scrollable Timeline with Animated Year Counter and Media
An elegant, kinetic, presentation-like website that uses scrolling to drive deep, layered animation and audio feedback.
Full Screen Slider
A cinematic landing page powered by GSAP ScrollSmoother and Observer plugins. It features a complex preloader sequence transitioning into a full-screen slider where images are revealed via intricate clip-path polygon animations triggered by scroll gestures.
Photo Inview Animation: Venetian Blinds Effect
A high-end, editorial-style web design where content appears smoothly and coordinately, creating a sense of premium quality and attention to detail.
Selected Demos 2019-2020
A highly interactive portfolio showcase powered by GSAP ScrollTrigger and Splitting.js. It features a custom fluid cursor, complex SVG text masking effects, and a seamless page transition system that loads external iframes into a 3D-transformed modal overlay upon interaction.
GSAP ScrollTrigger Parallax Effect
This demo is a masterclass in scroll-driven animation, where GSAP’s ScrollTrigger plugin choreographs multiple, layered effects. A fluid parallax effect is created by using scrub: 1 to tie the yPercent and rotation of decorative elements directly to the scrollbar. This is complemented by a sophisticated text reveal, where GSAP’s SplitText plugin animates characters into view with a staggered opacity and y tween, demonstrating a powerful and modular approach to building complex, interactive scrolling experiences.
Horizontal Scroll Section with GSAP and Locomotive Scroll
Experience a classic “pinned” horizontal scroll effect, where a vertical scroll action is converted into horizontal movement. GSAP’s pin: true property freezes the section in place, while a tween animates the x property of the inner container, creating a cinematic, side-scrolling gallery.
Infinite Cover Flow with GSAP and Tailwind
Experience a sophisticated “pinned” scrolling effect where a vertical scroll action drives a horizontal card carousel. GSAP’s pin: '.gallery' property freezes the component in the viewport, while ScrollTrigger’s onUpdate callback scrubs a GSAP timeline to animate the cards’ xPercent, scale, and opacity.
Scroll-Driven Web Gears Animation
A complex technical example demonstrating how to ensure animation functionality even without CSS animation-timeline: scroll() support. The code first checks for support and, if absent, uses GSAP ScrollTrigger as a polyfill for scroll-driven animation.
Illustration Parallax on Hero Section
A parallax effect with GSAP ScrollTrigger - as the page scrolls, a trigger animates the Y-coordinate of several image layers, creating a sense of depth, with movement smoothness defined by a CustomEase.
Infinite Scrolling Cards with GSAP and ScrollTrigger
A demonstration of an advanced GSAP technique for an infinite carousel, where the animation of each element is cyclically repeated with precise staggering, creating the feeling of continuous 3D space.
Super Mario Scrollytelling Timeline with GSAP
Classic ‘scrollytelling’ with GSAP - creating the illusion of movement by animating transform: translateX on position: fixed elements based on the vertical scroll of an extra-long page.
GSAP Draggable and ScrollTrigger Timeline
A polished implementation of GSAP’s ScrollTrigger that links main page scroll to a custom animated timeline, utilizing Draggable for precise, responsive horizontal navigation and enhanced by cinematic scroll-based section transitions.
GSAP Preloader and Hero Animation Sequence
This is a polished landing page intro sequence utilizing the GSAP ecosystem (Timeline, CustomEase, SplitText) to deliver high-performance, staggered entrance animations, focusing on modern preloader transitions and dramatic typographic reveals.
Scrolling 3D Card Carousel
An impressive, fully controlled 3D carousel effect where the entire animation sequence - card rotation, stacking, and perspective transition - is synchronized to the user’s scroll depth via GSAP ScrollTrigger, showcasing high-performance transform: rotateX manipulation for engaging visual depth.
Full Screen Scroll Slideshow with Sound FX
A demo of a vertical section-snapping gallery with fixed content, utilizing GSAP ScrollTrigger and Lenis for smooth scroll control. The core feature is ClipPath and SplitText-driven background and title transition logic between slides.
GSAP Layout and Animation Explorations N°2
A showcase of professional animation control: gsap.config({ force3D: true }) for performance optimization, CustomEase for refined acceleration, and a master timeline for precise preloader-to-Hero synchronization.
GSAP Parallax Effect in ReactJS
This demo uses a React and GSAP ScrollTrigger combination to create a parallax effect with smooth scrolling. The key feature is the animation’s synchronization with scroll movement, achieved through Lenis integration.
Simple Horizontal Scroll with GSAP in ReactJS
This demo shows how to use GSAP ScrollTrigger to create full-screen horizontal scrolling by pinning the container (pin: true) and synchronizing xPercent with the vertical scroll.
Scroll-Based Reveal Animations with ScrollTrigger
Technically, this is an example of using GSAP for “in” and “out” element animations based on scroll position. The code effectively uses callback functions like onEnter, onEnterBack, and onLeave to manage element states, making them visible only when needed.
GSAP Fanned Cards Carousel
A visually impressive carousel with physics and animation controlled by the mouse. The code uses GSAP to create a realistic “fanning” motion for the cards, dynamically adjusting their position and animation delay for a smooth transition.
Three.js 3D Model Animation with GSAP ScrollTrigger
An immersive scroll animation built on GSAP (ScrollTrigger) and Three.js. Features include 3D model loading, volumetric lighting, and dynamic animation parameters that can be easily adjusted via a control panel.
