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.
- 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...
- The "Top 5 Features of GSAP 3" (totally subjective; you'll probably find other nuggets you like even more but we had to pick 5)
- The "GSAP 3 Release Notes" has all the nitty-gritty details (warning: it's long).
- The GSAP 3 Documentation.
Here are some of our favorite demos so far (please send us yours!).
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 gsapwill 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.tgzand 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!
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!
Edited by GreenSock