GreenSock 3 Web Animation: Get to Know GSAP’s New Features

On November 1st 2019, the GreenSock Animation Platform (GSAP) released version 3, which is its major upgrade to date.

GSAP is a powerful, backward-compatible, performant, and mature JavaScript animation library that allows you to animate pretty much anything on the web — such as DOM elements, JS objects, SVGs, CSS properties, etc.

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 gsap object:

// tween
gsap.to(selector, {})

// timeline
const tl = gsap.timeline()

Also, duration is no longer a parameter of the to(), from(), or fromTo() methods, but it’s set inside the vars object. In particular, the old

TweenMax.to(selector, 1, {})

becomes

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 staggerTo(), staggerFrom(), and 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
})

Keyframes

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.

Simple Animations

Here’s an example of using the three basic GSAP methods: to(), from(), and fromTo():

See the Pen
GSAP3-to-from-fromTo-examples by SitePoint (@SitePoint)
on CodePen.

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:

See the Pen
GSAP3-eases-example by SitePoint (@SitePoint)
on CodePen.

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:

See the Pen
GSAP3-keyframes-example by SitePoint (@SitePoint)
on CodePen.

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.

Continue reading GreenSock 3 Web Animation: Get to Know GSAP’s New Features on SitePoint.