Adding GSAP to a NextJS project is a great way to add some extra animation and interactivity to your website. Here’s a quick tutorial on how to do it:

Install the GSAP module

First, you’ll need to install the GSAP module for your project. You can do this with yarn or npm:

yarn add gsap
or
npm install gsap --save

Import GSAP into your component

Once you have the module installed, you can import it into your component:

import { gsap } from 'gsap';

Use GSAP in your component

Now that you have GSAP imported, you can start using it in your component. For example, you could create a simple animation like this:

const myElement = document.querySelector('.my-element');
gsap.to(myElement, {
 duration: 1,
 x: 100
});

This would animate the element with the class “my-element” to move 100 pixels to the right over the course of 1 second.

There are a ton of other things you can do with GSAP, so be sure to check out the docs for more information. And that’s all there is to adding GSAP to a NextJS project!