Installing GSAP & Your first animation

Installing GSAP via NPM

To install GSAP via NPM, run the following command in your terminal:

npm install gsap

Creating your first GSAP animation

GSAP animations, must always be loaded after the DOM has fully loaded. Here's a simple example of how you can create your first GSAP animation:

// Import GSAP
import { gsap } from 'gsap';

gsap.from('.box', { duration: 1, x: 100, opacity: 0 });

Replace x and opacity with the properties you want to animate. The code now animates the element with the class box by moving it 100 pixels to the right and fading it in over a duration of 1 second.

Replace .box with the selector of the element you want to animate.