On June 1st, 2020, GreenSock released ScrollTrigger to a sold out audience via a historic YouTube Premiere.

ScrollTrigger was built with a totally fresh perspective on how GreenSock animations should be controlled via scroll. Not only does the API offer more features than it’s predecessors, but it has a strong focus on performance which really shines in this “mobile-first” world. And as you can expect with any GreenSock product support is phenomenal.

For a full list of features, you’ll need to check out GreenSock’s ScrollTrigger API Docs, but my job here is to get you up and running quickly… so let’s go!

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

It’s recommended to register ScrollTrigger in your JavaScript to avoid tree-shaking with build tools.

gsap.registerPlugin(ScrollTrigger);

You can get recent CDN Urls from the GSAP Overview in the docs.

• Link any animation to a particular element so that it only plays when that element is in the viewport. This improves performance and ensures that your beautiful animations actually get seen!
• ScrollTriggers can perform an actions on an animation (play, pause, resume, restart, reverse, complete, reset) when entering/leaving the defined area or link it directly to the scrollbar so that it acts like a scrubber (scrub: true).
• Soften the link between the animation and the the scrollbar so that takes a certain amount of time to “catch up”, like scrub: 1 would take one second to catch up.
• Integrated with ScrollSmoother, GreenSock’s smooth-scrolling tool built on native scroll technology (members-only benefit).
• Snap to certain points in the animation based on velocity. In fact, you can getVelocity() of the scrolling anytime. Snap to the closest label in a timeline or progress value in an Array, or run your own custom function-based logic for snapping
• Embed scroll triggers directly into any GSAP animation (including timelines) or create standalone instances and tap into the rich callback system to do anything you want.
• Advanced pinning capabilities can lock an element in place between certain scroll positions. Padding is automatically added to push other elements down accordingly, so they catch up when the element gets unpinned (disable this with pinSpacing: false). You can even pin the same element multiple times at different points.
• Incredible flexibility for defining scroll positions – like “start when the center of this element hits the center of the viewport, and end when the bottom of that other element hits the bottom of the viewport”, use keywords (top, center, bottom, left, right), percentages, pixels, or even relative values like "+=300px". Once you get the hang of the syntax, it’s remarkably intuitive.
• Accommodates vertical or horizontal scrolling.
• Rich callback system including onEnter, onLeave, onEnterBack, onLeaveBack, onToggle, onUpdate, onScrubComplete, and onRefresh.
• Automatically recalculates positions when the window resizes.
• Enable visual markers during development to see exactly where the start/end/trigger points are. Customization options abound, like markers: {startColor: "green", endColor: "red", fontSize: "12px"}.
• Toggle a CSS class. For example, toggleClass: "active" adds the “active” class to the trigger element while the ScrollTrigger is active. You can affect other elements too.
• Responsive – use the matchMedia() method to create different setups for various screen sizes using standard media queries.
• Custom containers – you don’t need to use the viewport; define a custom scroller like a <div> instead.
• Highly optimized for maximum performance – scroll events are debounced, updates are synchronized with GSAP and screen refreshes, resize recalculations are throttled, etc.
• No scroll-jacking, so it can be combined with native technologies like CSS scroll snapping. If you want scroll-smoothing, you can use ScrollSmoother which integrates seamlessly with ScrollTrigger, or use the scrollerProxy() method to integrate with a 3rd party smooth-scrolling library.

In the video I explained how toggleActions work and how important they are. For each toggle event (onEnter, onLeave, onEnterBack, onLeaveBack) you can assign an action (play, pause, restart, reset, resume, complete, reverse, none). You’ll assign a toggleAction via a 4-part string like “restart pause resume reverse”.

The best way to understand how they work is to play with the values in the demos above and study the demo below.