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

Black Friday: Enjoy a 25% discount on the starter kits. Use code BLACKFRIDAY2024 at checkout.

LaunchFast Logo LaunchFast

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

Rishi Raj Jain
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.

Sponsored AICardify - AI-generated greeting cards

Generate AI Powered Greeting Cards For Every Occasion

Prerequisites

You’ll need the following:

Table Of Contents

Create a new Astro application

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

Terminal window
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:

Terminal window
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:

Terminal window
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:

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:

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:

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:

Terminal window
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.

Learn More Authenticating users in Astro with Better Auth: A Step-by-Step Guide
Authenticating users in Astro with Better Auth: A Step-by-Step Guide November 24, 2024
Astro vs Next.js: Choosing the Right Framework in 2024
Astro vs Next.js: Choosing the Right Framework in 2024 October 30, 2024
6 Essential Features Every Web Starter Kit Should Include
6 Essential Features Every Web Starter Kit Should Include October 26, 2024