Scroll

GSAP allows you to create jaw dropping scroll effects with minimal code for maximum impact.

Scroll Plugins

Infinitely Flexible,
Highly Optimised

Debounced events, pre-calculated intersection points, synced updates and throttled resize recalculations. We tackle performance headaches so you can focus on the fun stuff.

Slide, zoom, morph, draw. Link any GSAP animation to scroll - it’s completely framework agnostic.

ScrollTrigger

Ready, Set,
Scroll

Tell stunning and interactive stories. Give any tween or timeline a ScrollTrigger with just one line of code or customise as needed.

gsap.timeline({
  scrollTrigger: {
    scrub: 1,
    trigger: ".scroll-trigger-ready__worm-wrap",
    start: "top 90%",
    end: "bottom 30%",
  },
});

Demos Docs

Start

End

Pin, Scrub,
Debug

Pin sections in place, scrub through animations with the scrollbar, and debug easily by enabling visual markers.

const tl = gsap.timeline({
  scrollTrigger: {
    scrub: 1,
    pin: true,
    trigger: "#pin-windmill",
    start: "50% 50%",
    endTrigger: "#pin-windmill-wrap",
    end: "bottom 50%",
  },
});

tl.to("#pin-windmill-svg", {
  rotateZ: 900,
});

Craft animations for any viewport size with gsap.matchMedia()

ScrollSmoother

It’s like a gentle breeze

Effortlessly guiding your users from one section to another.

It’s smooth like butter

ScrollSmoother leverages the native scroll mechanics meaning you can deliver a fluid and immersive experience for everyone, no matter the device or user input.

Demos Docs

Create
mesmerising effects

Add gorgeous parallax and trailing effects by simply adding a data attribute

<div data-speed="0.8"></div>
<div data-speed="2.0"></div>
<div data-speed="1.2"></div>

Seamlessly integrated

Get all the capabilities of GSAP and ScrollTrigger with the added benefits of smooth scrolling. With tight integration across the whole ecosystem, even the most complex animations look flawless.

Back to Basics with Observer

Need more low-level control? Easily detect scroll and other events without wrestling with implementation details.

Demos Docs

Buttery Smooth Scrolling With GSAP Scroll Plugins

ScrollSmoother

Club GSAP

The easiest way to make buttery smooth work of scrolling.

ScrollSmoother
ScrollTrigger

Jaw-dropping scroll-based animations with minimal code.

ScrollTrigger
ScrollTo

Take your users on a wild scroll ride to wherever they need to go.

ScrollTo
Observer

Tell Observer which event types to watch and it will collect delta values.

Observer

Every time a new GSAP plugin is introduced, I'm close to bursting from excitement. The simplicity of the API makes applying these tools in projects such a dream.

Ryan Mulligan
With the incredible functionality, and the mind-blowing customer service, the price of Club GSAP admission is well worth it!

Tim Jaramillo / Creative Technologist / Animator / Front-End Developer
GSAP is the best thing that happened to SVG animations since SVG animations.

Sara Soueidan / Inclusive design engineer
There is no doubt that GSAP is currently the best available tool for creating astonishing interactive websites and animation effects.

Petr Tichy / Front-end Dev - ihatetomatoes.net
The depth of GSAP blows me away like all the time. It seems like I stumble on something new and amazing every time I peek at the docs.

Adam Kuhn / Front-End Developer