On November 1st 2019, the GreenSock Animation Platform (GSAP) released version 3, which is its major upgrade to date.
Its intuitive syntax empowers developers with the ability to create some mind blowing animation effects in a relatively short amount of time and with the minimum amount of code.
In this article, I’m going to highlight some great new features of GSAP 3 and get you started on how to use them to get things moving on web in no time.
What’s New in GSAP 3
More Features and Smaller File Sizes
GreenSock has been rebuilt from the ground up using ES6 modules. It’s still feature-packed, with more than 50 new library features, but it’s only half the size!
Condensed Syntax for Fast Coding
If you’ve ever used GSAP before, you’re already familiar with its intuitive, beginner-friendly syntax. The new API is even more simplified and quick to learn and use.
For example, now you don’t need to decide whether you want to use TweenLite or TweenMax, TimelineLite or TimelineMax. There’s just one object, the
// tween gsap.to(selector, ) // timeline const tl = gsap.timeline()
duration is no longer a parameter of the
fromTo() methods, but it’s set inside the
vars object. In particular, the old
TweenMax.to(selector, 1, )
gsap.to(selector, duration: 1 )
Much more readable and also flexible. In fact, you can now set the
duration using a function, for example.
Another plus of this new, simplified API is that staggering animations are a breeze to code. No need to use the old
staggerFromTo() methods because you can add staggers directly into the
vars object of regular tweens:
gsap.to(selector, x: 50, duration: 1, stagger: 0.5 )
For more flexibility, you can use a stagger object like this:
gsap.to(selector, x: 50, duration: 1, stagger: amount: 2, from: 'center' )
Finally, GSAP’s eases have always been awesome, but a bit verbose. Not now. Version 3 comes with a more concise and readable syntax for setting eases. For example, instead of:
Elastic.easeOut Elastic.easeIn Elastic.easeInOut
you simply write:
'elastic' // same as 'elastic.out' 'elastic.in' 'elastic.inOut'
Another simplification consists in the possibility of replacing labels with the
< symbol to indicate the most recently added animation’s start time and the
> symbol to indicate the most recently added animation’s end time. Below is an example of how you could use labels in a timeline:
gsap.timeline() .add('start') // this tween starts at the beginning of the // entire animation .to(selector, , 'start') // this tween starts 0.5 seconds after // the previous tween .to(selector, , 'start+=0.5')
You can now rewrite the code above as follows:
gsap.timeline() .to(selector, , '<') .to(selector, , '<0.5')
Inheritable Default Values for the Timeline
If the values for some of the settings in your timeline remain the same throughout the child tweens, gone are the days of having to write those values over and over again. GSAP 3 lets you set those properties once in the parent timeline and they will be inherited by the child tweens.
For example, instead of writing:
const tl = new TimelineMax() tl.to(selector, 2, ease: Power2.easeInOut, rotation: -180 ) .to(selector, 2, ease: Power2.easeInOut, rotation: -360 )
Now, you can simply write:
const tl = gsap.timeline(defaults: duration: 2, ease: 'power2.inOut' ) tl.to(selector, rotation: -180 ) .to(selector, rotation: -360 )
Your GSAP 3 code gets even more concise and readable with keyframes. Keyframes, a concept that is quite familiar to CSS developers, are great in those cases when you want to animate the same element in different ways. Instead of creating a separate tween for each stage of the animation, you can now pass an array of keyframes to the
vars object and all the steps of the animation will be perfectly sequenced inside the same tween. Here’s an example of how this works:
gsap.to(selector, keyframes: x: 250, duration: 1, y: 100, duration: 1, delay: 0.5 )
More Utility Functions
This latest release of the GreenSock library comes packed with a bunch of new utility methods like
snap(), which lets you snap a value to an increment or to the closest value in an array, and
random(), which makes it a breeze to generate a random number based on parameters or randomly select an element in an array, and tons more.
Here’s an example of using the three basic GSAP methods:
GSAP Eases for Life-like Animations
Eases are foundational components of animation. They embody the timing of tweens and thereby add interest and naturalness to the motion you create on screen.
GSAP lets you add tons of eases by means of the GreenSock Ease Equalizer, a handy tool that offers a visual representation of GSAP easing options as you select and tweak the best fit for the particular effect you’re after.
Let’s try some eases for our musical bird:
An Example of Keyframe Animation with GSAP
As I pointed out above, GSAP 3 gives you the option of implementing a number of tweens on the same element in a more efficient and readable way using keyframes.
Here’s an example:
Using GSAP keyframes on the SVG bird element lets me apply a number of tweens without having to write each tween separately. The advantage is that I don’t need to repeat some of the code — for example, the selector code (
'.bird') or any of the settings that remain the same throughout the animation.
GreenSock 3 Web Animation: Get to Know GSAP’s New Features