• What is GSAP?
• Why use GSAP?
• How do we use GSAP?
• Sources:

GSAP, also known as GreenSock Animation Platform, let's you create animations faster and easier. Greensock exists out of a set of small javascript files you can use on all browsers. GSAP has a lot of different features you can use to get your animation working.

With GreenSock you can easily animate anything you want. You have tons of plugins you can choose from that can do things for you. It's also very custom or "tweenable", because with GSAP you can customize things you normally cannot change but GSAP will apply the property for you, such as position: "absolute" or borderStyle: "solid".

On the website of GSAP they aexplain that GSAP is:

1. Crazy fast
2. Has a lot of features
3. Very compatible with different browsers or frameworks
4. Zero dependencies which minimizes load times
5. An active community to help you out
6. Free to use (unless it's for commercial use)

I'll be using GSAP for this project to animate things like SVG's.

On this page you can find the whole documentation and on this page you can find the whole guide on how to get started with GSAP. I also wrote here my own guide on how to get started with GSAP:

The first thing to do is to get GSAP into our project. There are a few different methods on how to get GSAP into your project:

1. Copy the cndn link from the frontpage and paste it into your <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script> tag of your project as src
2. Install locally on your pc with npm: npm install gsap
3. You can also download the zip file and figure this out on your own, because I'm not going to use it
4. Apparently there are "more" ways to use GSAP, which you can read about here

For my own project, I'll install it by using the npm install gsap line (with bonus plugins: npm install ./gsap-bonus.tgz). After that you have to include this following line in your working file, to use GSAP in there: import { gsap } from "gsap";.

To avoid registering a plugin multiple times, I can import GSAP and all the plugins I need in a gsap.js file, import what I need from that file to other modules. On the website they're showing an example on how this gasp.js file would look like if it's done using GSAP core and DrawSVG:

export * from "gsap";
export * from "gsap/DrawSVGPlugin";
import { gsap } from "gsap";
import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";
gsap.registerPlugin(DrawSVGPlugin);

// in another file:
// import { gsap, DrawSVGPlugin } from "../gsap.js"

1. https://greensock.com/gsap/
2. https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin
3. https://greensock.com/get-started/