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...
- 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.
- The GSAP 3 Migration Guide
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 thennpm 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!
-
5
Recommended Comments
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 accountSign in
Already have an account? Sign in here.
Sign In Now