Scroll Animations

A sticky card stack effect using GSAP ScrollTrigger where each card rotates, offsets, and bounces as it reaches its sticky lock position on scroll. Supports custom rotate, x, and y values per breakpoint with two variants: a three-card row and wide full-width cards.

A scroll-driven zoom effect that morphs a circular image into a full-screen background using GSAP Flip and ScrollTrigger. As the user scrolls, the image expands to fill the viewport, a dark overlay fades in, and the image subtly scales and translates for depth.

A large-typography scroll list where hovering or centering an item reveals a fixed preview image with a clip-path reveal animation. Supports infinite Lenis scrolling by duplicating the list, with separate active-state logic for touch and non-touch devices.

Animates an SVG stroke from 0% to 100% as the user scrolls, using GSAP DrawSVGPlugin and ScrollTrigger. Supports separate desktop and mobile SVGs that swap via GSAP matchMedia, with the animation scrubbed directly to scroll position.

Pins a section and translates its panels horizontally as the user scrolls vertically, using GSAP ScrollTrigger. Supports any number of panels, per-breakpoint disable via a data attribute, and nested scroll animations via container animation.

A pinned scroll section that steps through paired visuals and text items. Each step reveals a new image via clip-path animation and fades in the corresponding text with a stagger, driven by ScrollTrigger's onUpdate progress. Includes a progress bar and reduced-motion support.

Full-viewport cards that stack on top of each other as you scroll, with the previous card sliding down and its inner image rotating and translating for a parallax depth effect. Built with GSAP ScrollTrigger scrubbed to scroll position.

A flexible scroll-reveal system using GSAP and ScrollTrigger that animates direct children of a group with configurable stagger, distance, and trigger start. Supports nested groups with independent stagger and distance values, reduced-motion handling, and optional parent inclusion.

Animates a stack of items along a custom SVG path as the user scrolls, using GSAP MotionPathPlugin and ScrollTrigger. Each item fades, blurs, scales, and reveals its child content at precise scroll positions. Supports responsive path scaling and debounced resize handling.

Sets up Locomotive Scroll v5 (built on Lenis) for smooth momentum scrolling. Covers initialization, Lenis options, start/stop/destroy controls, nested scroll containers, and data-attribute-driven per-element speed and offset overrides.

A flexible GSAP + ScrollTrigger parallax system driven entirely by data attributes. Supports vertical and horizontal parallax, custom scrub duration, scroll start/end positions, per-element start/end offsets, responsive disabling per breakpoint, and optional separate trigger/target elements.

Uses GSAP Flip and ScrollTrigger to seamlessly scale and reposition a single target element between multiple wrapper waypoints as the user scrolls. Flip calculates the size and position difference between wrappers and animates the transition scrubbed to scroll progress.

Displays the current scroll progress as a zero-padded percentage number, updated in real time via a GSAP ScrollTrigger scrub on the full document body.

A fixed top-of-page progress bar animated with GSAP ScrollTrigger scrubbed to the full document scroll. Includes an optional click-to-scroll feature using ScrollToPlugin that jumps to the clicked position on the bar.

Animates multiple stacked image and content layers at different scroll speeds using GSAP ScrollTrigger, creating a depth illusion. Each layer is assigned a numeric data attribute that maps to a yPercent target — lower numbers move faster, simulating foreground depth.