Skip to main content

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%",
},
});

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.

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.

Buttery Smooth Scrolling With GSAP Scroll Plugins

  • ScrollSmoother

    Club GSAP
    ScrollSmoother
  • ScrollTrigger

    ScrollTrigger
  • ScrollTo

    ScrollTo
  • Observer

    Observer
  • Ryan Mulligan

    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
  • Tim Jaramillo / Creative Technologist / Animator / Front-End Developer

    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
  • Sara Soueidan / Inclusive design engineer

    GSAP is the best thing that happened to SVG animations since SVG animations.

    Sara Soueidan / Inclusive design engineer
  • Petr Tichy / Front-end Dev - ihatetomatoes.net

    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
  • Adam Kuhn / Front-End Developer

    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

Showcase