Using GreenSock Animation Platform (GSAP) in Astro: A Step-by-Step Guide

In this guide, you will learn how to use GreenSock Animation Platform (GSAP) in an Astro application. You will go through the process of setting up a new Astro project, installing the gsap module and animating a text box based on the state of a checkbox.

Prerequisites

You’ll need the following:

Node.js 18 or later

Create a new Astro application
Integrate GreenSock Animation Platform (GSAP) in your Astro project
- Install GreenSock Animation Platform (GSAP) SDK
- Use GSAP in the index route
Build and Test your Astro application locally

Create a new Astro application

Let’s get started by creating a new Astro project. Execute the following command:

npm create astro@latest my-app

npm create astro is the recommended way to scaffold an Astro project quickly.

When prompted, choose:

Empty when prompted on how to start the new project.
Yes when prompted if plan to write Typescript.
Strict when prompted how strict Typescript should be.
Yes when prompted to install dependencies.
Yes when prompted to initialize a git repository.

Once that’s done, you can move into the project directory and start the app:

cd my-app
npm run dev

The app should be running on localhost:4321.

Now, let’s move on to integrate GSAP in your Astro application.

Integrate GreenSock Animation Platform (GSAP) in your Astro project

Install GreenSock Animation Platform (GSAP) SDK

Execute the command below to install the necessary package for using GSAP:

npm install gsap

The command installs the following library:

gsap: A framework-agnostic JavaScript animation library.

Use GSAP in the index route

To demonstrate usage of GSAP, you will animate a box left and right based on the checked state of an checkbox.

First, let’s create the box and the checkbox in the default index route. Make the following additions in the src/pages/index.astro file:

---
// File: src/pages/index.astro
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background: black;
      }
    </style>
  </head>
  <body>
    <h1>Astro<h1/>
    <input type="checkbox" />
    <div class="box"></div>
  </body>
</html>

So you’d now be able to see a black box and a checkbox above it. Let’s import gsap module in the index route via the following additions:

---
// File: src/pages/index.astro
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background: black;
      }
    </style>
  </head>
  <body>
    <h1>Astro<h1/>
    <input type="checkbox" />
    <div class="box"></div>
    <script> 
      import gsap from "gsap"; 
    </script>
  </body>
</html>

and now you are just left with one step, i.e. to animate the box using GSAP whenever the checkbox is clicked. Let’s make the following additions in the index route and understand what they do:

---
// File: src/pages/index.astro
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background: black;
      }
    </style>
  </head>
  <body>
    <h1>Astro<h1/>
    <input type="checkbox" />
    <div class="box"></div>
    <script>
      import gsap from "gsap";

      const element = document.querySelector( 
        '[type="checkbox"]'
      ) as HTMLInputElement; 

      element?.addEventListener("change", () => { 
        if (element.checked) gsap.to(".box", { x: 200 }); 
        else gsap.to(".box", { x: 0 }); 
      }); 
    </script>
  </body>
</html>

In the additions above, you have created an event listener to the change event of the checkbox. This event is triggered whenever the checkbox is checked or un-checked. Further, depending on the state of the checkbox, you either animate the button to move 200 units to the right, or come back at it’s original position.

Build and Test your Astro application locally

To test the application, prepare a build and run the preview server using the command below:

npm run build && npm run preview

Conclusion

In this guide, you learned how to use GreenSock Animation Platform (GSAP) in an Astro application.

If you have any questions or comments, feel free to reach out to me on Twitter.