A Guide to Web Animation with GSAP (1 line of JavaScript code) - Part 1
Tags: javascript, animation, html, webdev
Published: 2020-07-17 11:29:30


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](https://greensock.com/js/speed.html) than jQuery). It is used by roughly **10,000,000** sites and many major brands. You can always read more about GSAP [here](https://greensock.com/get-started/).

A few weeks ago I wrote about [Animating web content with Javascript and CSS](https://dev.to/olawanle_joel/animate-website-content-with-javascript-and-css-1cee) 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](https://greensock.com/get-started/#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](https://greensock.com/install) for more details.

The simplest way to add the core GSAP tools to your page is to use a script tag like this😁:
```Html
<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`

```Html
<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:
```Javascript
gsap.to(".box", {duration: 1, x: 100});
```
Here is a perfect example making use of `gsap.to()`🤯

{% codepen https://codepen.io/GreenSock/pen/PoYjyNj %}

- 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:
```javascript
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:
{% codepen https://codepen.io/GreenSock/pen/OJLgroR %}

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**
```Javascript
//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**
```javascript
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](https://greensock.com/get-started/) 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):

```javascript
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](https://greensock.com/get-started/) there is an interactive tool that allows you to visually explore various eases.🧐

**For example**, 
```javascript
gsap.to("#logo", {duration: 1, x: 300, ease: "bounce"});
```

{% codepen https://codepen.io/GreenSock/pen/MWgoZLX %}

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**, 

{% codepen https://codepen.io/GreenSock/pen/RwbZaZK %}

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:
```javascript
//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

{% codepen https://codepen.io/GreenSock/pen/OJLgdyg %}

## 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](https://greensock.com/docs/) for more information.
****

As always, any questions or suggestions, please feel free to leave a response or [tweet me](https://twitter.com/olawanle_joel) 🤭! Be sure to connect with me on socials! 😎


********

_Read **Part 2** [here](https://dev.to/olawanle_joel/a-guide-to-web-animation-with-gsap-part-2-82o)_