GSAP 3 Cool New Stuff

GSAP 3 has been out since late 2019 and this article isn’t a review of the whole platform, nor is it really a tutorial. It’s simply a few of my favorite new features and a couple of hidden gems you may have missed.

If you’re a long time user of the GreenSock Animation Platform, you’re gonna notice some changes to the API. If you’ve never used GSAP before, you can follow along here for some of my favorite features and also check out my GSAP 5 Minute Quick Start post.

No more choosing TweenMax or TweenLite

In the GSAP of yesteryear, you needed to choose between flavors of the platform. For the most compact choice, you’d probably have gone with TweenLite and the CSS plugin. TweenMax offered the advantage of loading the most used plugins, but was slightly heavier.

That choice is no longer required. There is now only one flavor for the core GSAP files and it also loads:

• CSS Plugin
• Attr Plugin
• Snap Plugin (new in GSAP 3)
• Modifiers Plugin

Syntax

That leads to a favorite feature – the syntax. It’s so easy and concise. I love how the duration is now in the vars.

TweenMax.to(yourTarget, 0.5, {x:100});
TweenLite.to(yourTarget, 0.5, {x:100});
// new
gsap.to(yourTarget, {duration: 0.5, x: 100});

Timeline syntax

I can’t say enough good things about timelines. So easy to sequence and rearrange. Client changes are fast and easy – just change the order of the tweens. Defaults though — WOW! I love timeline defaults. In the past, when you needed the same ease, duration or whatever property multiple times, you had to add it to each tween. Now you can set all that with timeline defaults.

You just load up the defaults with anything you need on each tween (or most of them anyway) and you’re good to go. Any child tweens can overwrite the defaults by adding that property to the individual tween.

const tl = gsap.timeline({
  defaults: {
    ease: "elastic",
    duration: 1.15,
    rotation: 90,
    opacity: 0.5,
    scale: 1.5
  }
});

Motion Path Plugin

Hands down my favorite new feature is the MotionPath plugin. You can animate SVG, canvas, DOM elements etc. along a motion path. You can use a SVG path element, which is what I do most of the time since I work with a lot of SVGs. You can also use an array of points.

Here’s a little demo I created for the GSAP 3 launch.

See the Pen MotionPath Distribute GSAP 3.0 by Craig Roblewsky (@PointC) on CodePen.

MotionPath utility methods

That leads to a hidden gem you may have missed. The MotionPath plugin comes with a dozen helper methods. All come in quite handy. They include:

1. MotionPathPlugin.arrayToRawPath()
2. MotionPathPlugin.convertCoordinates()
3. MotionPathPlugin.convertToPath()
4. MotionPathPlugin.getAlignMatrix()
5. MotionPathPlugin.getGlobalMatrix()
6. MotionPathPlugin.getPositionOnPath()
7. MotionPathPlugin.getRawPath()
8. MotionPathPlugin.getRelativePosition()
9. MotionPathPlugin.pointsToSegment()
10. MotionPathPlugin.rawPathToString()
11. MotionPathPlugin.sliceRawPath()
12. MotionPathPlugin.stringToRawPath()

Other utility methods

Another favorite feature is all the new utility methods (in addition to the MotionPath methods I listed above).

One, that I like in particular, is mapRange. You map a value in one range to the same position in another range. You can either get an immediate value or create a reusable function. Basic example:

//maps 150 in the 0 to 300 range to the same position in the 0 to 1 range
gsap.utils.mapRange(0, 300, 0, 1, 150); // 0.5

That’s just one of many handy utility methods. You can see in the demo above that I used the random and wrap methods too. Cool stuff! I encourage you to check out the utility method docs on the GreenSock site for all the cool details.

Staggers

Remember in the old days when you had to use a dedicated staggerTo() or staggerFrom() tween? I love the new ‘staggers everywhere’ feature. You just target a group of elements and set a simple stagger or get crazy and add a stagger object. Check out these pieces of sample code from the docs.

gsap.to(".box", {
  y: 100,
  stagger: 0.1 // 0.1 seconds between when each ".box" element starts animating
});

gsap.to(".box", {
  y: 100,
  stagger: { // wrap advanced options in an object
    each: 0.1,
    from: "center",
    grid: "auto",
    ease: "power2.inOut"
  }
});

I use staggers almost every day in my animation work. Check out the stagger docs on the GreenSock site to learn more.

Hidden gem

A really handy feature in GSAP 3 (that I think many people may not have noticed) is tweening to a height of auto. Sounds simple, but it isn’t. I use this a lot. Here’s a little demo so you can see this in action. Pretty neat and quite handy.

See the Pen Animate to height auto by Craig Roblewsky (@PointC) on CodePen.

Final thoughts

Okay, this one was a little departure from my other articles, but I thought it was worth mentioning some of these things to my readers.

If you know me or have been going through MotionTricks much, you know how much I love working with GSAP. I commend Jack Doyle for creating a wonderful platform and one heck of a great web community.

Oh yeah, in case you didn’t know it, I do help moderate the help forum on the GreenSock site. You can check out my profile over there, if you like.

Until next time, keep your pixels movin’.