GSAP Animations in Angular - Getting Started

What is GSAP and what will we learn in this tutorial

Greensock Animation API GSAP is an animation library written in JavaScript. It works with ES6 and above javascript environments, and lets you create animations without struggles. It's the most used animation library in the world, and for specific reasons, it is:

1. Performant
2. Easy to use
3. Easy to understand
4. Handle SVG animations seamlessly

In this tutorial series we will learn how to use GSAP in Angular, using attribute and structural directives.

This is what we will create:

NOTE: This tutorial will cover only a 1% of GSAP functionalities, for more visit the library website.

Prerequisites

1. Angular base knowledge
2. npm basic knowledge
3. GSAP basic knowledge
4. Angular and Node installed

Part 1. Install GSAP

Create a new angular app with the following command: ng new myApp, choose the name you want for the app, angular routing and SCSS as the main style preprocessor (or what you prefer).

Installing GSAP in Angular is pretty simple using npm, from the root of your angular app type npm install --save gsap @types/gsap.

If the installations are successful you will get a message in the terminal as follow:

This will install GSAP and its types as a dependency of your project.

Note: you could get different packages version, these are the latest versions nowadays.

In the next episode we will create the core directive and our first animation!

Thanks to

• clideo.com - an amazing tool to edit videos online (you can also make memes 😎)
• onlineconverter.com - an online tool to convert video (and other files)
• TabNine - a plugin for a lot of IDEs which uses deep learning to perform code completion - see the article here

Comments

[denstenn]

Cloud Video Editor (official version solveigmm.com/en/products/html5-cl... ) is an advanced video editor that allows managing any content. With the help you can cut and join video, add transitions, text, graphics, overlay video, voice-over.

[Zach Saucier]

GSAP 3+ comes bundled with official TypeScript declarations. You should not load the old, unofficial ones from @types. We at GreenSock also recommend using the GSAP 3 syntax: greensock.com/3-migration/