Skip to content

How to add GSAP

Astro ^4.0.0

You can easily add GSAP to your Astro project!

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

    Terminal window
    npm install gsap
  2. You can now import it into your project inside a script in any .astro file:

    import { gsap } from "gsap";
    const box = document.getElementById("box");
    const myTimeline = gsap.timeline();
    .from(box, {
    opacity: 0,
    .to(box, {
    opacity: 1,
    duration: 0.25,
    <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: