skip to content

When and How to use the JS Animation Library GSAP

March 16, 2020

This article explains when it’s a good idea to use a javascript animation library and why.

Recently on a client project, we ran into an animation problem where a CSS animation wouldn’t loop over again at a specific point even though the playState was set to playing, and on top of that, we needed a callback function to run once the animation had ended. Chris Coyier wrote about this problem on CSS Tricks. One of his solutions was to clone the node, remove it and reinsert it into the DOM. That wasn’t a possibility for us because the element we were animating contained a lot of images that would have been a performance hit and the loop needed to be seamless with an illusion that the animation never actually ended. That’s when it was decided we couldn’t get the job done with plain CSS animations and needed to use a powerful js animation library, like GSAP.

Not everyone is going to have this specific problem, so when should you use an animation library?

Short answer: When you’re struggling to make a CSS animation work, or need greater control, it’s time to use a Javascript animation library.

After trying a few animation libraries, my favorite is GreenSock. It’s relatively simple to get up and running and allows you to have some serious control with your animations (and by the way, FUN).

Why use GreenSock?

  • It’s free but has a paid tier that offers bonus plugins (the plugins are free to try and experiment with on Codepen, and you’ll most likely fall in love and find them helpful)
  • Cross Browser Compatibility (which is so nice)
  • Small file size
  • It has a huge community in forums and slack channels to help with any questions or hiccups you may encounter
  • Activity Maintained
  • Lots of detailed documentation
  • Advanced features like morphing, motion paths, physics, dragging, scrolling etc.

What all can you animate with GSAP?

Pretty much anything. Any CSS property, WebGL/Three.js environments, custom object values, etc. One of the core creators, Jack, said you can throw anything at it, and it’ll attempt to animate it. Ain’t that nice!

Installing GSAP

You can install gsap via NPM or Yarn

yarn add gsap

Or download a zip file or via a CDN. More information on installing GSAP can be found here: https://greensock.com/get-started/

If you have any issues, do watch their installation video. It’ll save you time. Really.

Putting GSAP To Use

A real-world use case of an animation (or tween) is a fade-in-and-up where it transitions the opacity and transform Y properties. This type of animation renders a nice effect with cards or elements in a grid, and something even better is staggering it, meaning it applies to each one with a little delay. This all can be handled really well in GSAP.

We run ONE line:

gsap.from('.grid__item', {opacity: 0, y: 10, duration: .3, ease: 'sine.in', stagger: 0.2});

The method from sets the beginning state and then takes the current values as the end state. Next, we have .grid__item, this is the selector we want to animate. This argument takes either a string, or you can give it a variable like const gridItem = document.querySelector('.grid__item'); and pass it gridItem, or you can run document.querySelector('.grid__item'). I find just passing in the string or a variable is the most readable.

After the DOM selector, we have an object that takes the attributes we plan on animating starting from the beginning state with a duration of .3 seconds, the ease, and importantly, the stagger. The stagger will provide the animation for each one with a delay of 0.2 seconds instead of running the animation on all of them at the same time.

Example of fade-in-and-up:

See the Pen gsap-example-stagger by Bri Camp Gomez (@brianacamp) on CodePen.

Animation Runs When in Viewport

This is great and all, but usually you want to run the animation once the elements are in the viewport, otherwise if they’re down the page, you won’t see that the animation ran! Currently, we run the animation on page load. In order to run it once it’s in the viewport, we’ll use the native implementation of Intersection Observer. I won’t go into too much detail about it since I want to keep this article short, but if you wanted to read more about it, I’d visit this article from Alligator.io and the MDN Intersection Observer API docs.

Here’s the code with Intersection Observer running once the grid element is 40% in the viewport, we run the animation:

See the Pen gsap-example-stagger-intersectionObserver by Bri Camp Gomez (@brianacamp) on CodePen.

If you peeked at the code, you might have noticed a few changes that needed to be done.

I removed the from method for this case because we don’t want the images to be shown and then have opacity set to 0, and animate to 1 once the element is in the viewport. Instead, we want the images on load to have an opacity of 0, and once the parent element is 40% in the viewport, we animate from 0 to 1.

To separate out the logic, I added this line:

gsap.set('.grid__item', {opacity: 0, y: 10});

This makes the images have 0 opacity and moves the y position down 10px on page load. I like setting these values via JS vs CSS in case the user doesn’t have JS enabled, they can still see the images, so no harm no foul!

Then once the grid is 40% in the viewport, we run this line:

gsap.to('.grid__item', {opacity: 1, y: 0, duration: .3, ease: 'sine.in', stagger: 0.2});

It’s extremely similar to our first from line we had earlier. The to method takes the element’s current properties and animates them to the new values we set here.

If you wanted to get fancy you could run callbacks for your animation to do something when it’s running, after it ran, etc. The opportunities are pretty endless with GSAP!

Conclusion

As you can see, using a js animation library gives you a ton of power and control over your animations with very little and readable code. You can do quite a bit with just three methods we covered from(), set(), and to(), and that’s just the very tip of the iceberg. If you get stuck don’t hesitate to search or ask questions on their forum–the community is extremely helpful and supportive. Best of luck to you and happy tweening!

Other Resources

GSAP Getting Started: https://greensock.com/get-started/

GSAP Docs: https://greensock.com/docs

GSAP Forums: https://greensock.com/forums

GSAP Staggers https://www.youtube.com/watch?v=wDnUtY5KcOc

GSAP Showcase to see other examples: https://greensock.com/showcase/