Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

GSAP 3.1 Released

| GreenSock

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.


New getRelativePosition() helper function

This isn’t really a GSAP 3.1 feature, but it’s a neat addition to our Helper Functions page that we wanted to share…

Have you ever wanted to move one element to another element even if they’re in different containers and maybe even have various transforms applied, warping the coordinate systems and making it super difficult to calculate? We’ve whipped together a magical function for you that taps into a MotionPathPlugin feature and solves this conundrum.

Here’s a quick demo that shows a red dot nested inside a transformed <div> animating to the center of a rectangular <div> that’s nested inside of 2 other containers that each have various transforms applied! See if you can figure out another way to accomplish something like this (you can’t just use getBoundingClientRect() because that reports in the global coordinate space, but the movement would happen inside a transformed container that uses a totally different coordinate space!).


Download today!

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



Happy tweening!

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

Join the Club

Cook up some delightful animation today with a generous dose of GSAP.

- Team GreenSock

User Feedback

Recommended Comments

There are no comments to display.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.