Search the Community

This is a guest post from one of the best teachers of GSAP, Carl Schooff, also known as SnorklTV. If you're new to GSAP or just looking to learn about the GSAP 3 syntax, his video courses are second to none! I can't tell you how many hundred's of questions I've seen in the GreenSock forums about controlling GSAP animations on scroll. I'm so happy there is finally a genuine GreenSock tool to power the future of scroll-driven animations. Before I get into the specifics, it's worth a moment of time to honor those that got us here. A short history of Scroll-driven Animations John Polacek paved the way in 2013 with Superscrollorama, a jQuery plugin that used GSAP under the hood. Many amazing sites were created with this highly-acclaimed, ground-breaking, and trend-setting tool. In 2014 Jan Paepke took the reins and did a complete re-write and SuperScrollarama became ScrollMagic. ScrollMagic was hugely successful as it offered a slew of new features. Excellent demo files made the tool easy for beginners to understand. Awards sites exploded with many clever effects made with the ScrollMagic and GSAP combo. However, as with many solo-led open source projects, it's popularity created a hefty support burden that couldn't be managed. As issues went unanswered in the ScrollMagic repo, more users found their way to the GreenSock forums asking for support on a product GreenSock didn't create or have any way of fixing. ScrollTrigger is born 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! Watch the Video This video is from my course GSAP 3 Express. I've got over 6 hours of training and loads of exclusive demos to help you master the GreenSock Animation Platform from the ground up at creativeCodingClub.com As always, I load my videos up with info so that I don't have to write a ton of stuff, but here are some key points. Get ScrollTrigger and GSAP ScrollTrigger is hosted on a CDN along with GSAP. Just use the script tags below to load it into your page. <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script> Register ScrollTrigger 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. For use with npm or more advanced build tools check out the GSAP installation videos. Super Basic Demo with a Single Tween The animation is super slow so that you can see how the animation reacts to entering and leaving the scroller-start and scroller-end positions. See the Pen ScrollTrigger QuickStart by Snorkl.tv (@snorkltv) on CodePen. Control a Timeline with ScrollTrigger See the Pen GreenSock ScrollTrigger Timeline by Snorkl.tv (@snorkltv) on CodePen. GreenSock's Toggle Action Demo 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. See the Pen toggleActions - ScrollTrigger by GreenSock (@GreenSock) on CodePen. I'm hoping these resources help get you up and running quickly. For more inspiration check GreenSock's massive collection of ScrollTrigger Demos. What's next? I've only scratched the surface of what ScrollTrigger can do. I'll definitely be creating more training on this awesome tool. If you need help learning GSAP and want to take your skills to the next level check out my courses at CreativeCodingClub.com.

Note: This plugin was replaced with MotionPathPlugin in GSAP 3. Please see the GSAP 3 release notes for details. Animate virtually any property (or properties) along a curved Bezier path which you define as an array of points/values that can be interpreted 4 different ways (described as the Bezier's "type", like type:"soft"? "thru" (the default) - the plugin figures out how to draw the Bezier naturally through the supplied values using a proprietary algorithm. The values you provide in the array are essentially treated as anchors on the Bezier and the plugin calculates the control points. The target's current/starting values are used as the initial anchor. You can define a curviness special property that allows you to adjust the tension on the Bezier where 0 has no curviness (straight lines), 1 is normal curviness, 2 is twice the normal curviness, etc. Since "thru" is the default Bezier type, you don't need to define a type at all if this is the one you want. "soft" - the values that you provide in the array act almost like magnets that attract the curve towards them, but the Bezier doesn't typically travel through them. They are treated as control points on a Quadratic Bezier and the plugin creates the necessary intermediate anchors. The target's current/starting values are used as the initial anchor. "quadratic" - allows you to define standard Quadratic Bezier data (Quadratic Beziers have 1 control point between each anchor). The array should start with the first anchor, then control point, then anchor, control point, etc. for as many iterations as you want, but obviously make sure that it starts and ends with anchors. "cubic" - allows you to define standard Cubic Bezier data (Cubic Beziers have 2 control points between each anchor). The array should start with the first anchor, then 2 control points, then anchor, 2 control points, anchor, etc. for as many iterations as you want, but obviously make sure that it starts and ends with anchors. For full details please consult the BezierPlugin documentation.

With the help of the CSSPlugin, GSAP can animate almost any CSS-related property of DOM elements including the obvious things like width, height, margin, padding, top, left, and more plus more interesting things like transforms (rotation, scaleX, scaleY, skewX, skewY, x, y, rotationX, and rotationY), colors, opacity, and lots more. Because animating DOM elements in the browser is so common, GSAP automatically checks to see if the target is a DOM element and if it is (and you haven't already defined a "css" object in the vars parameter), the engine creates that css object for you and shifts any properties that aren't reserved (like onComplete, ease, delay, etc. or plugin keywords like scrollTo, morphSVG, pixi, etc.) into that css object when the tween renders for the first time. We recommend using the more concise style that omits the css:{} object but be aware that either style is acceptable. Learn more in the CSSPlugin documentation.

GSAP 3.2 has some groundbreaking features for converting coordinates and aligning elements. Check out the video explanation below. Warning: it's a bit advanced, but hopefully you'll see how crazy-useful these capabilities can be. New: "alignOrigin" for motion paths MotionPathPlugin recognizes a new alignOrigin property that pins a certain spot on the target to the path. For example, alignOrigin: [0.5, 0.5] pins the center of the target on the path and sets the transformOrigin accordingly so that rotations are around that point as well. To get a similar effect before 3.2, you'd need to set the transformOrigin separately as well as a -50 xPercent/yPercent. Use the Array syntax to define progress values along the x and y axis, so [1, 0.5] would be the right side, centered vertically. Or use a point object like {x: 20, y: 50} to specify a coordinate (measured from the top left corner in pixels at its native size). Sample code // Move the element along a path, rotating it along with the line gsap.to("#spaceship", { duration: 5, motionPath: { path: "#path", autoRotate: true, align: "#path", alignOrigin: [0.5, 0.5] // aligns the center of the target on the path } }); See the Pen MotionPath aligning with path demo by GreenSock (@GreenSock) on CodePen. See the MotionPathPlugin docs for details. New: getRelativeDistance() that transcends coordinate spaces Have you ever wanted to move one element to another element even if they're in different containers... which may have various transforms, warping the coordinate systems and making it super difficult to calculate? If so, you will love this magical function which is explained in the video at the top of this page. See the Pen GSAP 3 convertCoordinates() by GreenSock (@GreenSock) on CodePen. See the getRelativePosition() docs for details. New: convert coordinates between elements/contexts GSAP can now take a local coordinate from inside one element and calculate exactly where that coordinate lines up inside of ANOTHER element's local coordinate space! So you could take a "click" pointer event from the window and map that to an element's local coordinate system even if it's deeply nested inside various containers that have transforms applied! Or, as you can see in the demo below, convert between coordinate spaces to make the blue arm stay connected with the rotating red arm: See the Pen GSAP 3 convertCoordinates() by GreenSock (@GreenSock) on CodePen. See the convertCoordinates() docs for details. And more... GSAP 3.2 also delivers various bug fixes, so install the latest version today (3.2.6). There are many ways to get GSAP - see the Installation page for all the options (download, NPM, zip, etc.) Resources Full release notes on each release is on Github Full documentation In case you missed it: GSAP 3.1 highlights (previous release) Getting started with GSAP Learning resources Community forums Happy tweening!