GSAP ScrollTrigger
Live GSAP ScrollTrigger examples: pinned sections, scrubbed timelines, parallax and reveals. Each has a free demo, Playground knobs and, for subscribers, the exact prompt and source.
ScrollTrigger is the GSAP plugin that ties animation to the scrollbar: it can pin a section while a timeline plays, scrub an animation to the scroll position, or fire a reveal when an element enters the view. Most award-style scroll sites rely on it.
The examples below are real effects from the library, picked across different kinds of scroll work. Each one runs live in the page preview, has Playground knobs for the values that matter, and a reduced-motion fallback. Subscribers get the exact prompt and the source; everyone can see how it behaves.
If you are new to it, start with a reveal or a scrubbed text effect, then move to pinned sequences. If you build with an AI tool, a prompt with exact timings, eases and trigger points matters far more than a loose description, which is the point of the prompts here.
Showing 12 · 91 effects and 124 templates use this
Featured WebGL A pinned, scrubbed scroll flies a Three.js camera along a Catmull-Rom spline through floating prints, accent rings and drifting particles, aiming a little ahead of itself; fog keeps the far work soft and DOM captions land at four waypoints.
Featured light GSAP Observer turns every wheel tick, swipe or arrow key into one full-height section change — a 1s expo.inOut scroll, a staggered content reveal on arrival, a rolling '03 / 06' counter — and refuses to over-scroll past the ends.
Featured light A 3×2 grid pins; as you scroll the centre tile grows (a measured clip-path inset) until it fills the viewport while the other five tiles slide out of frame, then a headline rises over the full-bleed image. Scroll up and it folds back into the grid.
Featured light Twelve procedural prints are packed into a JS masonry wall and surface in scroll-batched groups (y 40 → 0, opacity, 0.06s stagger); a Still life / Portrait / Architecture filter bar re-flows the wall with GSAP Flip.
Featured light A masthead-sized serif wordmark hanging below a sticky bar shrinks and docks into the bar's logo slot over the first 240px of scroll (Flip.fit, scrubbed) while a frosted background fades in, a hairline draws across and the nav links tighten up.
light A collection index whose rows flood with colour: surface, hairline and ink are each color-mix()ed from a 0–1 variable GSAP tweens (0.6s power3.out, ink 0.08s behind). Hover/focus, click-to-select or scroll-to-middle triggers.
light Three original Lottie animations authored as JSON: an upload story with intro, seamless loop and success segments in a full player (segments, speed, loop, scrub slider), a bell that rings on hover, a like burst on click and a scroll-scrubbed copy.
medium A plate breaks into irregular noise patches with a glowing rim and the next picture shows through — fractal noise compared with an animated threshold; it assembles on entering view, advances on click, scrubs with scroll or follows a manual threshold.
medium A poster is sliced into strips (or rings) that each slide by their own phase, so the image repeats in stepped copies like a slit-scan photo; a looping wave drives it, the pointer drags the nearest strips and scroll scrubs and shears the scan.
light Section links glide the page to their target instead of jumping: the stop clears the fixed header, longer trips take longer, focus moves to the heading, the nav ink follows, and any wheel, touch or key press hands control straight back.
light A still life, a release-loop diagram and a signature draw themselves stroke by stroke with DrawSVG (0% → 100%, 1.8s, 0.06s stagger), then fills and labels scale in. Draw on load, scrub with scroll, draw on hover and erase on leave, or toggle on click.
light Six icon pairs — play → pause, menu → close, sun → moon, heart → star, stop → record, next → done — and a large pebble that becomes a flower, star, drop, squircle or wave, all interpolated with MorphSVG on hover, click, scroll or a loop.
Pinned sections hold a scene while the timeline advances. Check start and end points and how the page behaves when the viewport resizes.
Production use needs ScrollTrigger.refresh() after layout changes and proper cleanup. Each effect here registers its cleanup.
Every effect has a prefers-reduced-motion fallback, which matters for accessibility and for some visitors' comfort.
Prompts Pro $169/month · All Access $299/month (prompts and source for everything) · single template $39 one-time. See pricing.
GSAP and its plugins, including ScrollTrigger and SplitText, are free to use as of their current licence, but read GSAP's own licence terms for your project. MOTION/LAB does not change them.
The live demo and the Playground knobs for every effect. The prompts and source files are for subscribers.
Yes. Many effects pair it with Lenis; see the Lenis examples page for how the two are connected.
Yes. Each prompt has a React version, and the guides show where to paste it in your tool.
Try “pinned”, “SplitText”, “WebGL”, “cursor”…