Top 5 Features of GSAP 3

GSAP 3 is the most significant upgrade we have ever had. With 50+ new features, there's a lot to be excited about, but to keep this post manageable, we’ll cover only 5. You might also be interested in the GSAP 3 highlights video. See the release notes for all the juicy details.

1. Half the size of the old TweenMax!

No kidding! GSAP retains almost all of its old functionality while adding 50+ features. We’ve learned a lot over the years and hopefully that shows. The core has been completely rebuilt from the ground up as modern ES modules.

2. Simplified API

No more “Lite” and “Max” flavors. TweenMax, TweenLite, TimelineLite, and TimelineMax have all been consolidated into a single "gsap" object. So simple! For example:

//simple tween like the old TweenMax.to(...)
gsap.to(".class", {duration:2, x:100});

//create a timeline and add a tween
var tl = gsap.timeline();
tl.to(".class", {duration:2, x:100});

Internally, there's one "Tween" class (replaces TweenLite/TweenMax) and one "Timeline" class (replaces TimelineLite/TimelineMax), and both have all of the features like repeat, yoyo, etc. When you call one of the gsap methods like .to(), .from(), etc., it returns an instance of the appropriate class with easily chainable methods.

Duration is now defined in the vars object. This allows several benefits such as:

Improved readability
It fits much better with keyframes
It allows default durations to be inherited (more on that below)
You can use function-based values

//OLD - duration was 2nd parameter
TweenMax.to(".class", 1, {x:100});

//NEW - duration is now a property of the vars object
gsap.to(".class", {duration:1, x:100});

All tweens are now stagger-able. There’s no need for the old staggerTo(), staggerFrom(), or staggerFromTo() methods because you can add staggers to regular tweens:

//simple stagger
gsap.to(".class", {
  x: "+=100",
  duration: 1,
  stagger: 0.5 //space each element's animation out by 0.5 seconds
});

//advanced stagger
gsap.to(".class", {
  x: "+=100",
  duration: 1,
  stagger: {
    amount: 2,
    from: "center",
    grid: "auto",
    onComplete: myFunction //define callbacks inside the stagger to make them apply to each sub-tween
  }
});

For more information about GSAP’s advanced stagger functionality, see this codepen.

New, more compact ease format. less typing, more readable, and zero import hassles. Here's the new convention for all of the standard eases:

//old way
Elastic.easeOut
Elastic.easeIn
Elastic.easeInOut
Elastic.easeOut.config(1, 0.5)
SteppedEase.config(5)

//new way
"elastic" //same as "elastic.out"
"elastic.in"
"elastic.inOut"
"elastic(1, 0.5)" //same as "elastic.out(1, 0.5)"
"steps(5)"

Backwards compatible

The new GSAP even adjusts itself to accommodate the old syntax! There's technically no more TweenMax, TweenLite, TimelineLite, or TimelineMax, but they're all aliased so that the vast majority of legacy code still works, untouched! You don't have to rewrite all your code for GSAP 3, but we'd recommend shifting to the new, more concise syntax for all your new projects.

3. Inheritance/Defaults

You don't have to keep setting the same ease over and over again...or duration...or whatever. Just set defaults on the parent timeline and let them be inherited by all its children! For example this repetitive code can be shortened, saving you time.

//old way, without timeline defaults
var tl = new TimelineMax();
  tl.to(obj1, 2, {ease: Power2.easeInOut, rotation: -180})
    .to(obj2, 2, {ease: Power2.easeInOut, rotation: -360})
    .to(obj3, 2, {ease: Power2.easeInOut, rotation: -180});

//new way, with timeline defaults
var tl = gsap.timeline({defaults:{ease: "power2.inOut", duration: 2}});
  tl.to(obj1, {rotation: -180}) //child tweens will inherit the duration and from the parent timeline!
    .to(obj2, {rotation: -360})
    .to(obj1, {rotation: -180});

Any defaults you set this way will get pushed into every child tween - it’s not limited to a certain subset of properties. This can really save you some typing! Inherited defaults are easily overwritten anytime a property is declared on a child.

4. All new MotionPathPlugin

The new MotionPathPlugin makes it very easy to move any element along an SVG <path>! For more information about the MotionPathPlugin, check out its documentation and the video below.

Club GreenSock members also get access to the new MotionPathHelper utility that lets you EDIT the motion path interactively in the browser. It’s never been so easy to move elements along a path!

5. New utility methods

GSAP 3 exposes some surprisingly useful utility methods that might save you time and hassle.

Need values to snap to the closest one in an array? Use gsap.utils.snap(). Tired of trying to figure out how to pull a random element out of an array? Let gsap.utils.random() do it for you. Want to distribute any value among an array of elements, complete with easing? It’s a piece of cake with gsap.utils.distribute().

Here’s how to use the gsap.utils.interpolate() method:

//numbers
let value = gsap.utils.interpolate(0, 100, 0.5); // 50

//strings
let value = gsap.utils.interpolate("20px", "40px", 0.5); // 30px

//colors
let value = gsap.utils.interpolate("red", "blue", 0.5); // rgba(128,0,128,1)

//objects
let value = gsap.utils.interpolate({a:0, b:10, c:"red"}, {a:100, b:20, c:"blue"}, 0.5); // {a: 50, b: 15, c: "rgba(128,0,128,1)"}

There's also an explainer video about how to use it.

Using GSAP's built in utility functions can make complex code simple. Check out the video below to learn more and see an example:

For a full list of the utility functions, some demos, and how to use them, check out the docs.

There's waaaaay more...

We've only scratched the surface of all the improvements in GSAP 3. Check out the release notes for a full list of the features and changes. There's also an updated getting started page.

Ready to play?

GSAP 3 Starter Pen (a CodePen template that already has the GSAP 3 files loaded. Fork away and have a blast!) This pen allows you to copy the resource URLs easily.
Or download the files to use locally.
Using a build tool? npm install gsap will get you the files. If you're a Club GreenSock user, there's a gsap-bonus.tgz tarball file in the local download above that you can simply drop into your project's folder and then npm install ./gsap-bonus.tgz and BOOM, it'll be installed just like any other package! See the installation docs for more information.