Creating animations with GSAP | GreenSock

As designers/developers, sometimes we face a project that requires animation. Could be a simple one, or the trickiest animation you have seen before. So, we need to use the right tool for the occasion, one that could bring us good performance without sacrificing its power. In that case, let me introduce to you GSAP: GreenSock Animation Platform.

GSAP is a very robust Javascript library that allow us to create timeline based animations with great precision and reliability. Based in their own words: an ultra high-performance, professional-grade animation for the modern web. But don’t take this for granted. Let’s see what we can do with it. We’re not going to do anything fancy or super-eye-catching, but hopefully after reading it, you’ll know more about the platform, its basic properties and its usage.

Getting Started

Before we start, we need to add the library to our project. The most simple way to do it is by using the CDN with a script tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>

Also, you have the option to use NPM

npm install gsap

To view a more detailed guide to how import things and work with Webpack and other related tools, visit the docs related to it.

What are Tweens?

Tweens are the basic animation functions inside GSAP. There’s a basic tween: Tweenlite, that is the foundation for the other tools available and can be combined with other tweens to create even more impressive effects. So, why do we not create our first animation?

Let’s suppose that you have a red rectangle and you want to change its color to blue while you change its position.

TweenLite.to("#rectangle", 2, {
    top: "200px",
    left: "120px",
    backgroundColor: 'blue'
});

Pretty easy, right? So, let’s understand what we did.

TweenLite is the main function that tells to our Javascript file that we are going to animate with GSAP. The .to method is the portion that signifies you want to animate from an initial state defined on our CSS to the properties we’re going to assign next. Then we define our object, with a set of properties that allow us to animate what we want. We use a CSS-like selector to call our HTML object, after the comma we defined how long the animation will be. And finally, we set the properties to be animated.

Take into consideration that GSAP has a lot of features and configurations to manage your animation. One of them is the easing options, that allows you to specify what kind of ease you want in your animation.

It seems that this is too basic for you, isn’t it? Ok, so let’s dive in into the multi-sequence animations.

Multi-sequence Animations

Multisi-sequence animations are the ones in which different animations or effects occur one at a time or concurrently. That is called a Timeline. For manage them GSAP gets us covered with its tool TimelineLite. This tool acts as a wrapper for other tweens or even other timelines, and control them effectively without efforts. Let’s look at an example.

As always, you could use the CDN to add the plugin to your project or use NPM. Here we’re going to use the CDN to make things easier.

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineLite.min.js

Next, in our javascript file, we define a variable and assign it a new Timeline.

let tl = new TimelineLite;<br>

After doing that, we want to start our animation. Let’s animate the previous one and try to mimic is behavior but with our Timeline.

tl.to("#rectangle", 2, {
    x: 200,
    y: 420,
    backgroundColor: "blue",
    ease: Sine.easeIn
})

Notice that we no longer use the TweenLite function but the variable defined in our first line. Also, to move our object we’re not going to use the previous CSS-like properties, but X and a Y, which acts like the same. We added a different type of ease, the Sine with its property easeIn. We increase the amount in the position properties to make it more dramatic.

So far, so good. Now we need to add another timeline or animation to this same object. Let’s do so.

.to("#rectangle", 1, {
    rotation: 30,
    x: 20,
    y: 600,
    backgroundColor: "black",
    ease: Back.easeIn
})

How cool is that? You see that you can add many animations as you want with the .to method and join them as one. That’s the power of the timeline and its multiple sequences. Hey, do you want to add another one?

.to("#rectangle", 1, {
    rotation: 200,
    x: 120,
    y: 200,
    backgroundColor: "red",
    ease: Power4.easeIn
})

You could see the power and simplicity of GSAP platform. It’s very easy to use and grasp, and its learning curve is very comfortable. But don’t let this little example we did fool you; GSAP is very powerful and it can animate almost everything Javascript can touch. You can see some examples of what GSAP can do for you and/or your team.

This is it. A sneak peek into a robust, solid and easy platform to animate your next project.