Introduction to GSAP ScrollTrigger Plugin

ScrollTrigger is a GSAP plugin that enables you to easily create animations based on the user's scroll position. It's a game-changer for web animations because it allows you to synchronize animation with the user's scrolling behavior, which can create some really immersive and engaging experiences.

Getting Started with ScrollTrigger

To use ScrollTrigger, you first need to include the plugin in your project. You can do this by either downloading the plugin files from the GreenSock website, using a package manager like npm, or including a link to the CDN hosted code in script tag.

With ScrollTrigger loaded, you can start creating scroll-based animations. The basic idea behind ScrollTrigger is to associate an animation with a specific element on the page and then define when that animation should play based on the user's scroll position. By default, adding a scroll trigger element will trigger the animation to play as soon as an element enters the viewport. We can customize this later, but for now let's just get a simple code example.

This code uses ScrollTrigger to animate an element with the class of "bae". The from() method is used to animate the element from its starting position (in this case, with an opacity of 0 and an X position of 200 pixels to the right) to its final position as defined in our HTML and CSS markup (aka Webflow designer position).

The opacity property sets the starting opacity of the element to 0, making it invisible at the beginning of the animation.

The x property sets the starting X position of the element to 200 pixels to the right of its original position.

The rotateZ property sets the starting rotation of the element to 360 degrees, causing it to spin once around its Z-axis.

The duration property sets the duration of the animation to 5 seconds.

Finally, the scrollTrigger property is used to set the trigger for the animation. In this case, the trigger is set to any element with class of "bae", which means that the animation will start once the ".bae" element comes into view in the viewport.

Overall, this code animates any element with classname of "bae" by gradually increasing its opacity from 0 to 1, moving it 200 pixels to the right along the X-axis, and rotating it 360 degrees around its Z-axis over a duration of 5 seconds. The animation will start once the element comes into view in the viewport.

Sync the Animation to Scroll

In order to sync the animation to scroll, all we have to do is add the scrub property with value of true to the ScrollTrigger object.

The scrub property is a powerful option available in the scrollTrigger object of GSAP's animation library. When set to true, it enables a scrubbing effect on the animation, which means that as the user scrolls up and down the page, the animation will play in reverse or forward, respectively. This creates a seamless and fluid visual effect that's often used in parallax animations. Additionally, setting the scrub property to a numerical value (e.g., 2) can further enhance the smoothness of the scrubbing effect. This value defines how long it takes for the animation to "catch up", allowing for finer control over the animation's smoothing. A higher value will result in a smoother, slower animation, while a lower value will create a snapper and quicker effect. Using the scrub property with a numerical value is a great way to create dynamic and polished animations that respond to the user's scrolling in a natural and intuitive way.

In the below example I've set the scrub property to a value of 2, which you can see makes it very smooth but also quite slow. I also set the ease to none. GSAP uses a default ease of power1.out, though I don't think it makes much sense to use easing on a scroll-based animation. Better to make it match 1:1 with ease set to none and let the scrub duration value control the easing along with user's scroll.

Define Start and End Points

Right now, our animation is starting as soon as the element enters the viewport and doesn't finish until it's fully out of the view port. We probably want to customize this.

The start and end properties in the GSAP ScrollTrigger plugin define the position of the scroll trigger on the page.

The start property specifies where the trigger will start. This can be set to a numerical value that represents the scroll position, or to a string value that represents a percentage of the viewport height. For example, setting the start property to "bottom bottom" will trigger the animation when the bottom of the element intersects the bottom of the viewport.

The end property specifies where the trigger will end. This can also be set to a numerical value or a string value representing a percentage of the viewport height. By default, the end value is set to "bottom top", which means the trigger will end when the bottom of the element reaches the top of the viewport. However, in our case we want the animation to complete when the center of the element reaches the center of the viewport, so we can use a value of "center center".

Together, the start and end properties determine the range of the ScrollTrigger's active area. Animations will only play while the ScrollTrigger is within this range.

You can get pretty specific with the start and end positions by passing numeric values too. For example, we could set start to "top 80%" and end to "+=500". This will start the scroll trigger animation when the top of the trigger element is 80% from the top of the viewport, and end it after scroll 500px beyond the start position.

Fine Tune Start and End Points with Markers

Simply add a property: value pair of markers: true to see a visual representation of your start and end points! This is a handy way to ensure your animation is behaving like you want it to.

Wrap Up

That concludes our introduction to GSAP's ScrollTrigger Plugin - a useful tool to make immersive animations on any website. I find that customizing the start and end points with Webflow IX2 scroll-based interactions can lack precision, and reach for ScrollTrigger when I need finer control. It performs well across all devices and has a bevy of other options that I'll cover in future posts as well. If you liked this, you might find my post on basic GSAP from(), to(), and fromTo() animations helpful.