GSAP 3.1 Released

Sign in to follow this   Followers 2

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:

Random staggers

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

The new 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 repeatRefresh

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.

repeatRefresh skips yoyo’s

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 borderRadius, borderWidth, margin, and padding values

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.

Download today!

There are many ways to get GSAP 3.1 - see the Installation page for all the options (download, NPM, zip, etc.)

Resources

• GSAP 3.1.0 full release notes on Github
• Full documentation
• Getting started with GSAP
• Learning resources
• Community forums

Happy tweening!