---
title: "AOS Animate: cómo usar Animate On Scroll en Astro"
description: "Aprende a usar AOS (Animate On Scroll) en Astro para agregar animaciones de aparición y activadas al desplazarse, paso a paso."
source: "https://www.launchfa.st/es/blog/aos-astro"
author: "Rishi Raj Jain"
created_at: 2024-06-04T00: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.
En esta guía, aprenderá cómo usar Animate On Scroll (AOS) en una aplicación Astro. Pasará por el proceso de configurar un nuevo proyecto Astro, instalar el módulo aos y agregar una animación gradual a un encabezado.
## Requisitos previos
Necesitará lo siguiente:
- [Nodejs 18](https://nodejs.org/en/blog/announcements/v20-release-announce) o posterior
## Tabla de contenido
- [Crear una nueva aplicación Astro](#crea-una-nueva-aplicación-astro)
- [Integre Animate On Scroll (AOS) en su proyecto Astro](#integrate-animate-on-scroll-aos-in-your-astro-project)
- [Instalar SDK de Animate On Scroll (AOS)](#install-animate-on-scroll-aos-sdk)
- [Usar AOS en la ruta de índice](#use-aos-en-la-ruta-de-índice)
- [Crea y prueba tu aplicación Astro localmente](#construye y prueba-tu-aplicación-astro-localmente)
## Crea una nueva aplicación Astro
Comencemos creando un nuevo proyecto Astro. Ejecute el siguiente comando:
```bash
npm create astro@latest my-app
```
`npm create astro` es la forma recomendada de desarrollar rápidamente un proyecto Astro
Cuando se le solicite, elija:
- `Empty` cuando se le pregunta cómo iniciar el nuevo proyecto
- `Sí` cuando se le pregunte si planea escribir Typecript
- `Estricto` cuando se le pregunta qué tan estricto debe ser Typecript.
- `Sí` cuando se le solicita instalar dependencias
- `Sí` cuando se le solicita inicializar un repositorio de git
Una vez hecho esto, puede ir al directorio del proyecto e iniciar la aplicación:
```bash
cd my-app
npm run dev
```
La aplicación debería estar ejecutándose en [localhost:4321](http://localhost:4321/)
Ahora, pasemos a integrar AOS en su aplicación Astro.
## Integre Animate On Scroll (AOS) en su proyecto Astro
### Instalar el SDK de Animate On Scroll (AOS)
Ejecute el siguiente comando para instalar el paquete necesario para usar AOS:
```bash
npm install aos
```
Instala lo siguiente:
- `aos`: una biblioteca animada en desplazamiento
### Utilice AOS en la ruta de índice
Para demostrar el uso de AOS, agregará un desvanecimiento en la animación a un texto.
Realice las siguientes adiciones en el archivo `src/pages/indexastro`:
```astro {14}
---
// File: src/pages/index.astro // [!code focus]
---
// [!code focus]
Astro
Astro
```
Observe que ha utilizado dos atributos específicos de AOS aquí:
- `data-aos`: para especificar el tipo de animación deseada
- `data-aos-delay`: para especificar el tiempo que debe durar la animación
Opcionalmente, lea más sobre [atributos de AOS](https://github.com/michalsnik/aos#predefinido-options)
Entonces ahora podrá ver un encabezado llamado `Astro`. Importemos el módulo `aos` en la ruta de índice mediante las siguientes adiciones:
```astro
---
// File: src/pages/index.astro // [!code focus]
import 'aos/dist/aos.css'; // [!code ++] // [!code focus]
---
Astro
Astro
// [!code ++] // [!code focus]
```
¡y listo!
En las adiciones anteriores, importó el CSS requerido por la biblioteca AOS e inició la instancia de AOS en el lado del cliente (en el navegador).
## Cree y pruebe su aplicación Astro localmente
Para probar la aplicación, prepare una compilación y ejecute el servidor de vista previa usando el siguiente comando:
```bash
npm run build && npm run preview
```
## Conclusión
En esta guía, aprendiste cómo usar Animate On Scroll (AOS) en una aplicación Astro.
Si tiene alguna pregunta o comentario, no dude en comunicarse conmigo en [Twitter](https://twitter.com/direct_messages/create/rishi_raj_jain_)
En esta guía, aprenderá cómo usar Animate On Scroll (AOS) en una aplicación Astro. Pasará por el proceso de configurar un nuevo proyecto Astro, instalar el módulo aos y agregar una animación gradual a un encabezado.
## Requisitos previos
Necesitará lo siguiente:
- [Nodejs 18](https://nodejs.org/en/blog/announcements/v20-release-announce) o posterior
## Tabla de contenido
- [Crear una nueva aplicación Astro](#crea-una-nueva-aplicación-astro)
- [Integre Animate On Scroll (AOS) en su proyecto Astro](#integrate-animate-on-scroll-aos-in-your-astro-project)
- [Instalar SDK de Animate On Scroll (AOS)](#install-animate-on-scroll-aos-sdk)
- [Usar AOS en la ruta de índice](#use-aos-en-la-ruta-de-índice)
- [Crea y prueba tu aplicación Astro localmente](#construye y prueba-tu-aplicación-astro-localmente)
## Crea una nueva aplicación Astro
Comencemos creando un nuevo proyecto Astro. Ejecute el siguiente comando:
```bash
npm create astro@latest my-app
```
`npm create astro` es la forma recomendada de desarrollar rápidamente un proyecto Astro
Cuando se le solicite, elija:
- `Empty` cuando se le pregunta cómo iniciar el nuevo proyecto
- `Sí` cuando se le pregunte si planea escribir Typecript
- `Estricto` cuando se le pregunta qué tan estricto debe ser Typecript.
- `Sí` cuando se le solicita instalar dependencias
- `Sí` cuando se le solicita inicializar un repositorio de git
Una vez hecho esto, puede ir al directorio del proyecto e iniciar la aplicación:
```bash
cd my-app
npm run dev
```
La aplicación debería estar ejecutándose en [localhost:4321](http://localhost:4321/)
Ahora, pasemos a integrar AOS en su aplicación Astro.
## Integre Animate On Scroll (AOS) en su proyecto Astro
### Instalar el SDK de Animate On Scroll (AOS)
Ejecute el siguiente comando para instalar el paquete necesario para usar AOS:
```bash
npm install aos
```
Instala lo siguiente:
- `aos`: una biblioteca animada en desplazamiento
### Utilice AOS en la ruta de índice
Para demostrar el uso de AOS, agregará un desvanecimiento en la animación a un texto.
Realice las siguientes adiciones en el archivo `src/pages/indexastro`:
```astro {14}
---
// File: src/pages/index.astro // [!code focus]
---
// [!code focus]