GSAP 3.1 has landed with some exciting new features and various bug fixes. We highly recommend updating at your earliest convenience. Here are a few highlights:
GSAP’s staggers get even more powerful. Use the new
from: “random” option to randomize how the staggers get applied.
Learn more about the advanced staggering options available in GSAP 3 below.
shuffle() any Array
shuffle() utility method randomly shuffles the contents of any Array (in place).
var array = [1, 2, 3, 4, 5]; gsap.utils.shuffle(array); // returns the same array, but shuffled like [2, 5, 3, 1, 4]
Timelines can now
Now timelines support
repeatRefresh which makes all child tweens
invalidate() and get refreshed when the timeline repeats, meaning their start and end values get re-calculated. It’s most useful for relative, random, or function-based values. For example, if a tween has a value like
x: “random(-100, 100)”, each time the timeline repeats
x would go to a new random value.
It seemed a little odd to refresh the values when going in reverse, so now
repeatRefresh won’t get triggered for the yoyo phase of the animation.
Smooth handling of complex
GSAP 3.1 accommodates not only simple values like
borderRadius: “50%” but also more complex ones like
borderRadius: “20px 50% 40px 15px” or
borderRadius: “50% 20%” and it animates between them smoothly. The same goes for borderWidth, margin, and padding which can have complex values (top, right, bottom, and left). It will also return complex values correctly via
gsap.getProperty(). Plus GSAP works around a Firefox bug that mis-reports certain values like borderRadius.
There are many ways to get GSAP 3.1 - see the Installation page for all the options (download, NPM, zip, etc.)
- GSAP 3.1.0 full release notes on Github
- Full documentation
- Getting started with GSAP
- Learning resources
- Community forums