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

On November 1st 2019, GreenSock Animation Platform (GSAP) released version 3, which is its most significant 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. We’ve covered GSAP before, for example in our beginner’s series and plugin guide, and we’re big fans.

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 GreenSock 3 and get you started on how to use them to get things moving on web in no time.

What’s New in GreenSock 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. GreenSock 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. GreenSock 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 GreenSock 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, GreenSock 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.

Taking Control of Complex Animations with the GSAP Timeline

GreenSock tweens are powerful and you can do a lot with them. However, to make sure one tween moves after the other, you’ll need to set the delay property of the second tween by an amount that takes into account the duration of the first tween. However, doing so could make your animation code hard to maintain, especially in more complex animations. What if you need to add more tweens or change the duration property in one of the delays in one of the tweens? Then you’ll have to modify the values of all or most of the delay property on the other tweens. Not practical at all.

An easier, more stable and maintainable approach would be to use the GSAP timeline. With a timeline, all the tweens inside it are executed by default one after the other, with no need to use delays.

Again, if you observe how natural motion of different parts occurs, you’ll soon realize how those parts don’t all move in mechanical succession with relation to each other. Most likely, some parts start moving while some others are already in motion. Or, some parts stop a bit before or a bit after some other parts do. The GSAP timeline makes available a few handy options to let you fine tune the start and end of tweens in relation to each other. Here they are:

• Absolute time, like a number. For example, 2 means that the next tween animates two seconds after the start of the timeline.
• Relative time with respect to the end of the entire timeline: '+=2' or '-=2'. This means that the tween animates two seconds after the end of the timeline or overlaps the end of the timeline by two seconds respectively.
• Label: 'myLabel'. The tween animates at the point of insertion of a specific label. If you haven’t created that label, GSAP adds it to the end of the timeline.
• Relative to a label: 'myLabel+=2' or 'myLabel-=2'. The tween animates two seconds after or two seconds before the end of the 'myLabel' label respectively.
• At the start of the most recently added animation (new to GSAP 3): '<'.
• At the end of the most recently added animation (new to GSAP 3): '>'.
• Relative to the start of the most recently added animation (new to GSAP 3): '<2' or '<-2'. The tween animates two seconds after the start of the most recently added animation or two seconds before the start of the most recently added animation respectively.
• Relative to the end of the most recently added animation (new to GSAP 3): '>2' or '>-2'. The tween animates two seconds after the end of the most recently added animation or two seconds before the end of the most recently added animation respectively.

One final advantage of using a timeline is nesting. You can build timelines that focus on specific parts of the animation and nest them inside a master timeline. This technique is really helpful when you need to coordinate the various parts of the animation into a harmonious and well-timed whole. It’s also a way of making your code more readable and maintainable.

Have a look at the demo below for an example of how you would go about using nested timelines:

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

To fine tune your animation, slowing it down while developing can be useful. To do so, use:

master.timeScale(0.2)

Now it’s much easier to take control of the relative timings and other small details. Don’t forget to remove this line of code on production, though!

The MotionPath Plugin

GSAP makes available a bunch of amazing plugins that allow you to create some complicated and fun effects in a few lines of intuitive code.

One of the coolest types of animation you can achieve is to represent an object as it smoothly moves along a path. Not easy to achieve, at least without GSAP.

The new MotionPath plugin makes it quick and straightforward to make any element move along an SVG path. The simplest implementation of the plugin looks like this:

// register the plugin (just once)
gsap.registerPlugin(MotionPathPlugin)

    gsap.to('.bird', {
      x: 20,
      y: 50,
      motionPath: '#path'
    } )

As long as you have an SVG path with the id of path, you’re good to go. You can also enter the path values directly instead of the id and it’ll work.

You can fine tune the effect by using different properties that you can set inside a motionPath object, as you can see in the demo below:

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

To find out more about the awesome features that this plugin puts at your fingertips, head over to the docs.

ScrollTrigger plugin

ScrollTrigger is the latest plugin GreenSock has launched and it’s got some amazing capabilities that let you take full control of scrolling animations efficiently and intuitively. For example:

• you can animate pretty much anything on scroll with this plugin — such as DOM elements, CSS, SVG, WebGL, Canvas
• you can easily scrub through animations
• you can pin elements in place
• you can create directionally smart animations

And adjustments to screen resizing and great performance are taken care of.

After importing the plugin into your project, which you can conveniently do via the CDN on the GSAP website, and registering it so that it seamlessly integrates with the core library, the simplest way to start using it is as follows:

// register ScrollTrigger
gsap.registerPlugin(ScrollTrigger)

/* implement the plugin to animate an element
 300 px to the right when the element is in view */
gsap.to(element, {
  x: 300,
  duration: 2,
  scrollTrigger: element
})  

When the element indicated in the scrollTrigger property is inside the viewport, the animation takes place.

To implement the myriad of settings this plugin makes available, just use a scrollTrigger object literal. For example:

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

The scrollTrigger object in the above demo includes the trigger, which is the element you want to animate as it appears in the viewport.

It also includes the start property, that you can use to instruct the plugin about the position the element needs to be at during scrolling for the animation to begin. In the case at hand, the element will begin moving as soon as its top part hits the center of the viewport.

You can specify what you want your trigger element to do as users scroll past it or as they scroll back to its position by setting the toggleActions property of the scrollTrigger object. GSAP makes available different options for maximum control, which you can set as the following events fire: onEnter, onLeave, onEnterBack, and onLeaveBack. By default, these options are set as follows: 'play none none none'. In the above demo, I adjusted my animation so that the image is revealed each time it’s in the desired position in the viewport and it’s obscured when it’s no longer in view, by using the following line of code: toggleActions: 'play reverse restart reverse'.

To find out more about this powerful plugin, check out these resources:

• ScrollTrigger docs on the GSAP website
• the Get Started video by Carl Schooff, the GSAP wizard behind the Creative Coding Club, which includes ScrollTrigger Express, a free course on GSAP 3 for beginners
• The introductory video tutorial by Gary Simon of DesignCourse

Conclusion

This quick introduction has just scratched the surface of what you can do with GreenSock. If you’re curious, start diving into its accessible and thorough documentation.

Now it’s over to you. Grab the latest release of GreenSock 3 and get stuff moving on the Web!

GSAP FAQs