Using Animate On Scroll (AOS) in Astro: A Step-by-Step Guide

In this guide, you will learn how to use Animate On Scroll (AOS) in an Astro application. You will go through the process of setting up a new Astro project, installing the aos module and adding a fade-in animation to a heading.

Prerequisites

You’ll need the following:

Node.js 18 or later

Create a new Astro application
Integrate Animate On Scroll (AOS) in your Astro project
- Install Animate On Scroll (AOS) SDK
- Use AOS 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 AOS in your Astro application.

Integrate Animate On Scroll (AOS) in your Astro project

Install Animate On Scroll (AOS) SDK

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

npm install aos

It installs the following:

aos: An animate on scroll library.

Use AOS in the index route

To demonstrate usage of AOS, you will add a fade in animation to a text.

Make the following additions in the src/pages/index.astro file:

---
---

<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>
  </head>
  <body>
    <h1 data-aos="fade-in" data-aos-delay="300">Astro</h1>
  </body>
</html>

Notice that you’ve used two AOS specific attributes here:

data-aos: to specify the type of animation desired
data-aos-delay: to specify the time for which the animation should last

Optionally, read more on AOS attributes.

So you’d now be able to see a heading named Astro. Let’s import aos module in the index route via the following additions:

---
import 'aos/dist/aos.css';
---

<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>
  </head>
  <body>
    <h1 data-aos="fade-in" data-aos-delay="300">Astro</h1>
    <script>
      import AOS from "aos";
      AOS.init();
    </script>
  </body>
</html>