Renan Ferro

Posted on Aug 18, 2023

Let's Understand and Create Cool Animations with GSAP - GreenSock and Angular

#angular #gsap #tutorial #animation

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 (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 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:

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.

🛠 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



npm install gsap

CDN



<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 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:



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



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:

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:



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:



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

There are other interesting methods available for use, you can see the list here: Timeline Methods

🕹 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:



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:

📌 Animated Texts

For this example, Let's animate some text elements without using the ScrollTrigger, take a look:



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:

🎯 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.

📌 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:



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



// 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 😄🤟