Let's Understand and Create Cool Animations with GSAP - GreenSock and Angular
Tags: angular, gsap, tutorial, animation
Published: 2023-08-18 17:29:27

Hey, guys!

If you are a frontend developer, developer or just passionate about cool websites and cool **User Experience**, you probably like animations!

The animations can be just a simple **fade** button animation for example or something more interesting like and interactive 3D object made with [Three.js](https://threejs.org/) (If you don't know it I advise you to know because it's amazing!)! 

We have a lot of possibilities animations, like the animations made with [GSAP](https://greensock.com/gsap/) and today we'll talk about it, understand how it works and make some cool animations with it!
___
## 📚 What's is GSAP?
**GSAP** is a powerful **JavaScript** library for making awesome animations with **JavaScript**! With this you can animate anything else and make cool animations in a simple and easy to understand way. **GSAP** offers a lot of plugins for you to make your animations and animate different things with different shapes, some plugins are:

- [Flip Plugin](https://greensock.com/docs/v3/Plugins/Flip/)
- [ScrollTrigger](https://greensock.com/scrolltrigger/)
- [MotionPathPlugin](https://greensock.com/motionpath/) 

In this article we will talk and make some animations with the plugin **ScrollTrigger**. With each one you can find and make a different animation! There are other plugins available and you can find them here: [GSAP List Plugins.](https://greensock.com/gsap-plugins/)
____
## 🛠 First steps to use

We need to do some steps to use **GSAP** in our applications, such as **install**, **import gsap** and the **plugins** and **register** the plugins, below we'll do these steps and configure our application to use it.

### 📌 Installation:
You can install the **GSAP** with **NPM** or use it with **CDN**:

**NPM**
```shell
npm install gsap
```
**CDN**
```javascript
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>
```
To use with CDN just insert this script **inside** the **<head>** tag of your project!


> This link has the most recent version of GSAP, be careful to use the most recent version according to the current moment


### 📌 Importation:
We need to import the **GSAP** and the plugins we want to use, like below:

```javascript
// typical import
import gsap from "gsap";

// get other plugins:
import ScrollTrigger from "gsap/ScrollTrigger";
import Flip from "gsap/Flip";
import Draggable from "gsap/Draggable";

// or all tools are exported from the "all" file (excluding members-only plugins):
import { gsap, ScrollTrigger, Draggable, MotionPathPlugin } from "gsap/all";
```

In our case we'll use the **GSAP** and **ScrollTrigger** plugin, so the **imports** and **register** will be as below:

```javascript
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);
```
___

## ⚙️ How it works?!

**GSAP** is a generic object that offers several properties and methods to create and control animations with Tweens and Timelines (which basically are the main ones and are used a lot by GSAP). With that we need to understand what **Tweens** and **Timelines** are, so let's do this

### 📌 Tweens:
**Tween** is what makes all the animation work, in it you can select any element you want to animate and with that you can implement animations in any property you want applying the effects according to the instructions applied with the methods.

The most useful methods for making simple animations are:

- [gsap.to()](https://greensock.com/docs/v3/GSAP/gsap.to())
- [gsap.from()](https://greensock.com/docs/v3/GSAP/gsap.from())
- [gsap.fromTo()](https://greensock.com/docs/v3/GSAP/gsap.fromTo())

> In order not to extend too much on the subject and make it an extensive article to read, let's just focus on a few points and with that I recommend consulting the GSAP documentation, which is wonderful and complete.

### 📌 Timelines:
**Timeline** is my favorite and as the documentation says it's powerful! With this you can create complex sequences of animations and make the animations beautiful, as it offers us simple ways to manipulate the "timeline" of animations with simple and easy to understand properties. Let's see an example:

```javascript
var tl = gsap.timeline({repeat: 2, repeatDelay: 1});
tl.to(".elementSelector", {rotation: 360, duration: 1});
tl.to(".elementSelector", {y: -20, opacity: 0, duration: 1});
```

And you can control the animation states like `start()`, `pause()`, `restart()`, `rever()` and some others in a very simplified form. See below how we can do it:

```javascript
tl.play();
tl.pause();
tl.resume();
tl.reverse();
```

> There are other interesting methods available for use, you can see the list here: [Timeline Methods](https://greensock.com/docs/v3/GSAP/Timeline)

___
## 🕹 Examples
Now, let's see some simple examples of how we can use GSAP and make our animations! I like to make simple animations in the examples because if we definitely understand how it works it's easier to make complex animations later and let our imagination take us where it's possible!

Soo, let's do it 🤘

### 📌 Animated box:
For this example, let's made a box animated! This animation we'll **rotate**, **scale** and change the **background-color** box, so the code will like bellow:

```typescript
let tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.container',
    start: 'top center', // when the top of the trigger hits the top of the viewport
    end: '+=400', // end after scrolling 500px beyond the start
    scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
  },
});

// add animations and labels to the timeline
tl.from('.box', {
  backgroundColor: '#28a92b',
  rotation: 360,
  scale: 0,
});
```
And bellow you can see the live demo:

{% embed https://stackblitz.com/edit/stackblitz-starters-9fp44u?embed=1&file=src%2Fmain.ts&view=preview %}

### 📌 Animated Texts
For this example, Let's animate some text elements without using the **ScrollTrigger**, take a look:

```javascript
setupGsap(): void {
    gsap
      .timeline()
      .to('.title0', {
        duration: 0.8,
        ease: 'back',
        delay: 0.9,
        scale: 7,
        opacity: 0,
        color: '#ffffff',
      })
      .from('.title1', {
        duration: 0.8,
        ease: 'back',
        delay: 1,
        x: 900,
        opacity: 0,
        color: '#feffa6',
      })
      .from('.title2', {
        duration: 0.8,
        x: -900,
        ease: 'back',
        delay: 1,
        opacity: 0,
        color: '#feffa6',
      })
      .from('.title3', {
        duration: 0.8,
        x: 900,
        ease: 'back',
        delay: 1,
        opacity: 0,
        color: '#feffa6',
      });
  }
```
And bellow you can see the live demo:

{% embed https://stackblitz.com/edit/stackblitz-starters-evvb4v?embed=1&file=src%2Fmain.ts&view=preview %}
___

## 🎯 Understanding the code and How it works:

### 📌 How it works:

As you can see, the animation will start when the `.container` element is centered compared to the top of the page. Because we specified `start: "top center"`. Therefore, when the element passed in the **trigger** is in the center of the page, the animation will start. Below you can see an explanation of the image.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmjj5qi5ck8wzen13qih.png)

### 📌 Understanding the code

If you notice, we always have a selector and after that an object, so to select our element that we want to animate, just do as below:

```javascript
// Remember, from is just one method of all that we can use!
gsap
 .timeline()
  .from('Your Selector Here', {
      ...
  }
}
```
And now we can manipulate the available properties of our element and make the animation the way we want, like below:

```javascript
// Remember, from is just one method of all that we can use!
gsap
 .timeline()
  .from('Your Selector Here', {
    opacity: 0,
    scale: 0,
    x: -500
  }
}
```
___
## Conclusion

**GSAP** is a great and powerful tool to allow us to make websites with amazing animations! It's performative and in a simple way offers us several ways and plugins to make animations!

I really like using it in projects I do and I hope that with this article you will feel more at ease with **GSAP** and with the will to start practicing and using it!

Any questions, suggestions or anything else, please leave a comment! It will be a conversation!

Thanks guys and see you soon 😄🤟