51 GSAP ScrollTrigger Examples

This GSAP Staggered Blinds Reveal creates a cinematic transition effect often used in hero sections or between major content blocks. By manipulating a series of div elements acting as “slats,” the animation mimics a zipper or venetian blinds opening. As the user scrolls, the slats slide away and rotate sequentially, revealing the content underneath (or changing the state) in a synchronized wave motion.

This Parallax Jungle Leaves Reveal creates a cinematic opening for a landing page. As the user scrolls, dense layers of tropical SVG leaves part ways - some moving left, some right - while smaller leaves float randomly in the background. The effect culminates in the reveal of a typography-based logo, creating a sense of depth and discovery perfect for storytelling or adventure-themed websites.

This Scroll-Triggered Text Highlight effect mimics the experience of marking important passages with a highlighter pen as you read. Using GSAP ScrollTrigger, the highlights animate seamlessly from left to right exactly when the text enters the reader’s viewport. The component offers multiple visual styles (full background, half-height, or underline) and fully supports dark mode, making it an excellent addition to long-form articles, documentation, or educational content.

This 3D Rotating iOS Time Picker recreates the tactile feel of native mobile controls on the web. It features three independently rotating wheels (Hours, Minutes, Meridiem) that snap into place with satisfying physics. The component leverages the cutting-edge Scroll-driven Animations API for buttery-smooth performance on supported browsers, while seamlessly falling back to GSAP for others. The 3D perspective creates a “drum” effect where numbers fade and rotate away as they leave the center view.

This Scroll-Driven Image Swapper demonstrates the bleeding edge of web animation. It uses the native CSS Scroll-driven Animations API to create a complex parallax-like effect where two columns of different heights scroll in sync. As you scroll, the images in the shorter column slide and crossfade to match the context of the taller column. Crucially, the code implements a Progressive Enhancement strategy: it checks for native browser support and falls back to GSAP ScrollTrigger for browsers that haven’t implemented the spec yet.

This GSAP ScrollSmoother Parallax Gallery represents a high-end implementation of scroll-based storytelling suitable for portfolios or luxury brand landing pages. It leverages the full power of the GreenSock ecosystem - specifically the premium ScrollSmoother and SplitText plugins - to create a “buttery” smooth scroll experience where content reveals itself with elegant, staggered animations and depth-inducing parallax.

A comprehensive showcase of modern UI trends implemented as a scrollytelling landing page. It leverages GSAP ScrollTrigger for complex animations like horizontal scrolling and pinning, while vanilla JavaScript handles a custom cursor, dynamic loading, and parallax-like effects, all wrapped in a bold, monochrome aesthetic using CSS mix-blend-mode.

An infinite 3D card carousel powered by GSAP ScrollTrigger.

An immersive scrolling experience where the user flies through a cloud of photos that smoothly approach and fade away, revealing an elegantly emerging text.

As the user scrolls down, images transition not by simple sliding or fading, but through a complex diagonal “wiping” animation controlled by dynamic gradients, all while the text content remains fixed over the changing background.

A stylized, “digital” flame that evolves over time but obediently transforms (fades or flares up, changes geometry) in response to user interaction (scrolling).

A suite of volumetric typographic experiments where depth is simulated by stacking multiple DOM layers along the Z-axis using transform-style: preserve-3d.

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.

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.

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.

An elegant, kinetic, presentation-like website that uses scrolling to drive deep, layered animation and audio feedback.

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.

A high-end, editorial-style web design where content appears smoothly and coordinately, creating a sense of premium quality and attention to detail.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.