Jump to content
GreenSock

GSAP 3 Is Available Now!


| GreenSock
325784

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.
  • New plugin for animating things along motion paths (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!)
  • Timeline defaults that get inherited by child animations
  • 15 brand-new super-useful utility methods like interpolate(), random(), snap(), mapRange(), etc.
  • Keyframes
  • Effects 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!)
  • 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: 

 

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.
  • 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!

  • Like 5

Get an all-access pass to premium plugins, offers, and more!

Join the Club

We consider it a privilege to serve you. Glad you're here.

- Team GreenSock



User Feedback

Recommended Comments

4 minutes ago, Qikker Online said:

What happened to throwProps on v3?

It's now called InertiaPlugin. It's even more streamlined and capable, but it does exactly what ThrowPropsPlugin did - it just has a more intuitive name now :)

  • Like 3
Link to comment
Share on other sites

5 minutes ago, hook said:

What are the browser compatibility levels? Specifically which versions of IE are supported?

IE9+ and pretty much every other browser you can think of. Obviously certain features are browser-specific, like you can't do 3D transforms in IE9 because the browser itself can't recognize those (so they'd silently fail), but that's not a limitation of GSAP. The core of GSAP itself is pretty much universal. 

  • Like 2
Link to comment
Share on other sites



Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×