How to add GSAP

You can easily add GSAP to your Astro project!

1. Start by installing the gsap package using your favorite package manager:

   npm

   npm install gsap

   pnpm

   pnpm add gsap

   yarn

   yarn add gsap

2. You can now import it into your project inside a script in any .astro file:

   src/components/Foo.astro

   <script>
   import { gsap } from "gsap";
   
   const box = document.getElementById("box");
   const myTimeline = gsap.timeline();
   
   myTimeline
       .from(box, {
           opacity: 0,
       })
       .to(box, {
           opacity: 1,
           duration: 0.25,
       })
   </script>
   
   <div id="box"></div>

3. That’s it, you’re all set up to use GSAP in your project!

To learn more about GSAP, check their official site or their docs:

GSAP Documentation