GSAP 3 is the most significant upgrade we have ever had. With 50+ new features, there's a lot to be excited about. Here are a few of the highlights:

What's so exciting? What changed?

There's a LOT to cover, so we broke this into a few articles. First, here are a few tasty morsels:

Roughly HALF the file size of the old TweenMax...but it has even more features.

the file size of the old TweenMax...but it has even more features. New plugin for animating things along motion paths (you can even edit the motion path in the browser!)

(you can even edit the motion path in the browser!) Simplified API (no more TweenLite, TweenMax, TimelineLite, and TimelineMax - they're consolidated into a simple "gsap" object, yet we've maintained backward compatibility with the vast majority of legacy code!)

(no more TweenLite, TweenMax, TimelineLite, and TimelineMax - they're consolidated into a simple "gsap" object, yet we've maintained backward compatibility with the vast majority of legacy code!) Timeline defaults that get inherited by child animations

that get inherited by child animations 15 brand-new super-useful utility methods like interpolate(), random(), snap(), mapRange(), etc.

like interpolate(), random(), snap(), mapRange(), etc. Keyframes

Effects extensibility

extensibility Animate to/from a width or height of "auto"

Built in modern ES6 modules format (but of course we provide files that work all the way back to IE9!)

format (but of course we provide files that work all the way back to IE9!) Much, much more...

For details, make sure you read...

Demos

Here are some of our favorite demos so far (please send us yours!).

Check out the full demo collection for more. A special shout-out to @dsenneff who created the animation at the top of this page!

Jump right in - here's a starter codepen:

See the Pen Try GSAP 3 on CodePen by GreenSock (@GreenSock) on CodePen.

More ways to play:

GSAP 3 Starter Pen - Fork the CodePen and away you go.

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 download 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.

will get you the files. If you're a Club GreenSock user, there's a gsap-bonus.tgz tarball file in download that you can simply drop into your project's folder and then and BOOM, it'll be installed just like any other package! See the installation docs for more information. The GSAP 3 docs

Tell us what you think!

Feel free to post in the our forums about what you like and any questions that you have. Or you can contact us directly if a public forum isn't your style.

Are you interested in having a GreenSock representative teach your team about the new version or speak at your next conference? Contact us and we'll do our best to make it happen!

Happy tweening!