A Guide to Web Animation with GSAP (1 line of JavaScript code) - Part 1

In this article, you will learn how to make things move easily on your website with just one line of JavaScript code. 🦹‍♀️

GSAP stands for GreenSock Animation Platform - animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery). It is used by roughly 10,000,000 sites and many major brands. You can always read more about GSAP here.

A few weeks ago I wrote about Animating web content with Javascript and CSS but I still searched for better, easier, and simpler ways of animating web content until I came across GSAP on twitter. I decided to go through the documentation and I fell in love with GSAP.

Before we get Started

Animation ultimately boils down to changing property values many times per second, making something appear to move, fade, spin, etc. 🦸‍♀️

A perfect example of animation is changing the x coordinate of an object from 0 to 1000 over the course of 1 second makes it move quickly to the right. Gradually changing opacity from 1 to 0 makes an element fade out.

Your job as an animator is to decide which properties to change, how quickly, and the motion's style (known as easing - we'll get to that later).

What can I animate with GSAP?

Simply GreenSock Animation Platform (GSAP) animates anything JavaScript can touch such as CSS properties, SVG, React, canvas, generic objects, e.t.c.

Getting Started

There are many ways to get GSAP. You can

• Load it from a CDN,
• Download it from our site,
• Install it via NPM/Yarn, or
• Get it from Github. See the installation page for more details.

The simplest way to add the core GSAP tools to your page is to use a script tag like this😁:

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

Successfully done that? You are cool to go!😘

Note: Endeavour to check the Installation guide for alternative methods to get GSAP.

Remember I said we were going to be making use of just one line of JavaScript code! it's actually true🥴...

We can either write our JavaScript code in a Js file on within a script tag in our HTML file. But don't forget to always allow the Javascript file to come after your linking to GSAP. In the example below my Js file is app.js

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

In this article, we would be making use of 4 basic methods/tween and I would be using examples from codepen to properly illustrate how they work:

• gsap.to()
• gsap.from()
• gsap.fromTo()
• gsap.set()

gsap.to()

To create an animation, gsap.to() needs 2 things:

• targets - The object(s) you are animating. This can be a raw object, an array of objects, or selector text like ".myClass".
• vars - An object with property/value pairs that you're animating to (like opacity:0.5, rotation:45, etc.) and other optional special properties like duration and onComplete.

For example, to move an element with a class of "box" to an x position of 100 (same as transform: translateX(100px)) over the course of 1 second:

gsap.to(".box", {duration: 1, x: 100});

Here is a perfect example making use of gsap.to()🤯

• The title's opacity was changed to 0.3 after animating for 1s
• The box moved by 300px in the x-direction
• Finally, the green box rotated while animating, and also the size reduced due to the scale value-added.

gsap.from()

This would mainly be used when animating web content, it simply animates from the assigned location to where element actually was...

For example, perhaps your ".box" element currently has its natural x position at 0 and you create the following tween:

gsap.from(".box", {duration: 1, x: 50});

The .box will immediately jump to an x of 50 and animate to an x of 0 (or whatever it was when the tween started).
In other words, it's animating FROM the values you provide to whatever they currently are.

Here is a perfect example:

This brings us to another method...🤓

gsap.fromTo()

This method allows you to define the starting values and the ending values of what you are animating.

Example

//tweens from width 0 to 50 and height 0 to 100
gsap.fromTo(".box", {width: 0, height: 0}, {duration: 1.5, width: 50, height: 100});

Finally, the last method I will be explaining is the set method

gsap.set()

This is used to immediately set some properties. It's essentially a zero duration tween, so you can use all of the same properties that you can use in other GSAP tweens.

For example

gsap.set(".boxTitle", {fontSize: 20, x: 10});

With that, we are done with the basic tweens or methods that we could use, but believe me, there is still so many important stuff I won't be able to mention in this article, so I highly recommend you to check their documentation once you are done reading this for better understanding.

The last few things I will be explaining in this article is

• Special properties
• Easing
• Staggers

And finally, I will explain a few things about controlling tweens.

Special Properties

A special property is like a reserved keyword that GSAP handles differently than a normal (animated) property. Special properties are used to define callbacks, delays, easing, staggers, and more.

A basic example of a special property is duration (which we've been using already):

gsap.to("#logo", {duration: 1, x: 100});

Other common special properties are:

• delay - The delay before starting animation.
• onComplete - A callback that should be invoked when the animation finishes.
• onUpdate - A callback that should be invoked every time the animation updates/renders.
• ease - The ease that should be used (like "power2.inOut").
• stagger - Staggers the starting time for each target/element animation.

Easing

This determines the style of movement of tweens, this is what makes your animation nice. An ease controls the rate of change during a tween. In the documentation there is an interactive tool that allows you to visually explore various eases.🧐

For example,

gsap.to("#logo", {duration: 1, x: 300, ease: "bounce"});

In the above example, we made use of bounce but we have other examples like:

• elastic
• rough
• slow
• back
• sine, e.t.c.🤗

Staggers

This is something I find very interesting. Staggers make it easy to animate a group of objects with a small delay between the start of each object's animation.

For example,

Don't let the above code confuse you, the line was simply broken down so it would be easier to understand the code.🤔

There are other cool things that could be done with GSAP, I will advise you to check their documentation as most of the examples used here were pulled out from their documentation. But before I end the tutorial I will be explaining

Controlling Animations

Though this might not really be useful for web contents its cool we have an idea

To control an animation, you need an instance to work with.
The to(), from(), and fromTo() methods all return a Tween instance, so you can store it as a variable and then control it very easily:

//create a reference to the animation
var tween = gsap.to("#logo", {duration: 1, x: 100});

//pause
tween.pause();

//resume (honors direction - reversed or not)
tween.resume();

//reverse (always goes back towards the beginning)
tween.reverse();

//jump to exactly 0.5 seconds into the tween
tween.seek(0.5);

//jump to exactly 1/4th into the tween's progress:
tween.progress(0.25);

//make the tween go half-speed
tween.timeScale(0.5);

//make the tween go double-speed
tween.timeScale(2);

//immediately kill the tween and make it eligible for garbage collection
tween.kill();

Here is a perfect example that explains controlling tweens

That's it

We’ve taken a look at the basics of creating and applying animations to our elements. Though there are many other things we did not explain, I believe this would help you.🤗

Don't forget to check GSAP documentation for more information.

As always, any questions or suggestions, please feel free to leave a response or tweet me 🤭! Be sure to connect with me on socials! 😎

Read Part 2 here