During my last project, I needed to create an animation on scroll. It’s not so easy with pure JS. So I needed a JS library. I found ScrollTrigger plugin for GSAP. And it’s incredible.

So what’s is GSAP?

The GreenSock Animation Platform (GSAP) animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery). See why GSAP is used by roughly 11,000,000 sites and many major brands.

ScrollTrigger creates scroll-based animations with minimal code. Or trigger anything scroll-related, even if it has nothing to do with animation. You can check all features here.

So let’s get started. First we need to add the CDN. The cool part is that you can choose which plugins you want and it will give you specific CDN, no nothing extra.

So once you’ve added the CDN you can start by adding:

gsap.to(".box", {
scrollTrigger: ".box", // start the animation when ".box" enters the viewport (once)
x: 500
});

This will move the .box div with 500 pixels to the right on page load. But if we want to move the div on mouse scroll? We need to add scrub property like this:

gsap.to(".box", {
   x: 500,
   scrollTrigger: {
      trigger: ".box",
      scrub: 1,
      }
});

Now once we start scrolling we can see how the div moves not automatically but on scroll.

Here ate some demos you can check with the source code.
As you can see the possibilities here are endless.