VOOZH about

URL: https://gsap.com/scroll/

⇱ Scroll | GSAP

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.

👁 Image

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,
});
Any Size

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

    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

Showcase

ScrollTrigger, SplitText

Explore All Showcases