Anthony

A Quick Start to GSAP Animation Library

A Quick Start to GSAP Animation Library

The aim of this article is to give you a basic idea of what GreenSock Animation Platform is all about, you might have heard about it or maybe seen it in action but have no idea how it actually works.

The GreenSock Animation Platform or GSAP for short is a powerful JavaScript animation library that enables Frontend developers to create robust timeline based animations easily.

This guide will show you how to set up and use GSAP’s TweenMax feature.

Getting Started

Before coding, we need to load the GSAP library into our HTML, to do this we’ll need to get the CDN link.

Copy and paste it at the bottom of your HTML, but make sure it’s above your main js script where you’ll be doing all the animation.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
  <script src="js/main.js"></script>

With that done we can now proceed with the coding.

We’ll start by creating our first TweenMax.to tween. The two methods of TweenMax(which are TweenMax.to & TweenMax.from) allow us to specify the target, which is the object we’ll be animating, the duration and the properties.

    TweenMax.to('target', duration, {properties})

In this case We’ll be using an empty div with a circlar shape.

CSS

  .circle{
      position: relative;
      height: 10rem;
      width: 10rem;
      background-color: brown;
      border-radius: 50%;
  }

Important Note: For the animation to work, the element which you want to animate must have a CSS property of position: relative, fixed or absolute.

TweenMax.to()

    TweenMax.to('.circle', 1, {
        left: 900,
        borderRadius: 0,
        backgroundColor: 'green',
        ease:Bounce.easeOut //GSAP eases includes Back.easeOut, Expo.easeOut, Elastic.easeOut, Power4.easeOut, etc.
    })

So basically, TweenMax will animated any DOM element that has a class of circle. Cool right?

TweenMax.from()

But what about if we want the element to animate from a specific origin to its original origin? That’s where TweenMax.from comes in play.

Let’s switch it and see how it works.

    TweenMax.from('.circle', 1, {
        left: 900,
        borderRadius: 0,
        backgroundColor: 'green',
    })

Animating Multiple Elements with a Single Tween

Let’s assume we have four divs with the class of box, we’ll target these boxes the same way we did with the previous element.

    TweenMax.from('.box', 0.9, {
        left: 900,
        borderRadius: 0,
        backgroundColor: 'green',
    })

Most of the time you’ll want these elements with the same class to animate one after the other, right? There is also a way for that. We use the staggerFrom method instead.

  TweenMax.staggerFrom('.box', 0.9, {
      left: 900,
      borderRadius: 0,
      backgroundColor: 'green',
  }, 0.4) // time between the animation of these boxes

Do something when animation finished

Let’s fade these boxes when the animation is done running

  TweenMax.to('.box', 0.5, {
        opacity:0,
        delay:3
    })

GSAP has a very robust callback system that allow us to fire off functions in respect to different events that happens through out the life of our tween

For example if we want to fire off a function when the tween is done running, we can pass on a property called onComplete and then specify the function we’d like to fire.

  TweenMax.to('.box', 0.5, {
      opacity:0,
      delay:3,
      onComplete: complete
  })

The function

  function complete() {
      console.log('Animation is done running...')
  }

Conlusion

We barely scratched the tip of the iceberg on what GSAP offers, And we can all agree that GSAP makes it easier to create and manipulate animations even if you have little understanding of JavaScript.

It’s a very robust library, and to get the best out of it you’ll need something more than what we did here. I suggest checking out the Greensock’s website to learn more about the library and experiment with different animation techniques.

comments powered by Disqus