--- title: "Using GreenSock Animation Platform (GSAP) in Astro" description: "How to use GSAP (GreenSock Animation Platform) in Astro application?" source: "https://www.launchfa.st/blog/gsap-astro" author: "Rishi Raj Jain" created_at: 2024-04-15T00:00:00.000Z updated_at: 2026-07-02T00:00:00.000Z --- > **Site index for agents** > Fetch https://www.launchfa.st/llms.txt to discover every page on this site. > Every page is also available as Markdown by appending `.md` to its URL. Using GreenSock Animation Platform (GSAP) in Astro 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 20](https://nodejs.org/en/blog/announcements/v20-release-announce) or later ## Table Of Contents - [Create a new Astro application](#create-a-new-astro-application) - [Integrate GreenSock Animation Platform (GSAP) in your Astro project](#integrate-greensock-animation-platform-gsap-in-your-astro-project) - [Install GreenSock Animation Platform (GSAP) SDK](#install-greensock-animation-platform-gsap-sdk) - [Use GSAP in the index route](#use-gsap-in-the-index-route) - [Build and Test your Astro application locally](#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: ```bash 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 you 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: ```bash cd my-app npm run dev ``` The app should be running on [localhost:4321](http://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: ```bash 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 a 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: ```astro title="src/pages/index.astro" ins={11-17,21,22} --- --- Astro

Astro

``` 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: ```astro title="src/pages/index.astro" ins={23-25} --- --- Astro

Astro

``` 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: ```astro title="src/pages/index.astro" ins={26-28,30-33} --- --- Astro

Astro

``` In the additions above, you have created an event listener for 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 to its 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: ```bash 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](https://twitter.com/direct_messages/create/rishi_raj_jain_).