- Easy to use
- Easy to understand
- 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.
- Angular base knowledge
- npm basic knowledge
- GSAP basic knowledge
- Angular and Node installed
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!