---
title: "AOS Animate: How to Use Animate On Scroll in Astro"
description: "Learn how to use AOS (Animate On Scroll) in Astro to add fade-in and scroll-triggered animations to your pages, step by step."
source: "https://www.launchfa.st/blog/aos-astro"
author: "Rishi Raj Jain"
created_at: 2024-06-04T00: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.
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 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 Animate On Scroll (AOS) in your Astro project](#integrate-animate-on-scroll-aos-in-your-astro-project)
- [Install Animate On Scroll (AOS) SDK](#install-animate-on-scroll-aos-sdk)
- [Use AOS in the index route](#use-aos-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 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:
```bash
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 text.
Make the following additions in the `src/pages/index.astro` file:
```astro title="src/pages/index.astro"
---
---
Astro
Astro
```
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](https://github.com/michalsnik/aos#predefined-options).
So you'd now be able to see a heading named `Astro`. Let's import the `aos` module in the index route via the following additions:
```astro title="src/pages/index.astro" ins={2,15-18}
---
import 'aos/dist/aos.css';
---
Astro
Astro
```
and... you are done!
In the additions above, you've imported the CSS required by the AOS library, and initiated the AOS instance on the client side (in the browser).
## 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 Animate On Scroll (AOS) 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_).
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 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 Animate On Scroll (AOS) in your Astro project](#integrate-animate-on-scroll-aos-in-your-astro-project)
- [Install Animate On Scroll (AOS) SDK](#install-animate-on-scroll-aos-sdk)
- [Use AOS in the index route](#use-aos-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 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:
```bash
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 text.
Make the following additions in the `src/pages/index.astro` file:
```astro title="src/pages/index.astro"
---
---