Using the GSAP library for animation

GSAP is an open source, scripted library that focuses solely on fast animation using JavaScript and provides cross-platform consistency support. It supports animation on a wide range of element types, such as Scalar Vector Graphics (SVG), React components, canvas, and so on.

GSAP is flexible, easy to install, and will adjust to any configuration given, from CSS properties or SVG attributes to a numeric value for rendering an object into a canvas.

The core library is a suite of different tools, divided into core tools and others, such as plugins, easing tools, and utilities.

Installing GSAP

Installing GSAP is straightforward using npm install or yarn add:

yarn add gsap
#or
npm install gsap

After installation, you should see a successful output such as that shown in the following screenshot:

Figure 8.13 – Results after successful installation

Now that we have GSAP installed, we’ll look...