---
title: "AOS Animate: Animate On Scroll in Astro verwenden"
description: "Lerne, wie du AOS (Animate On Scroll) in Astro verwendest, um Einblend- und scrollbasierte Animationen zu deinen Seiten hinzuzufügen, Schritt für Schritt."
source: "https://www.launchfa.st/de/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.
In dieser Anleitung erfahren Sie, wie Sie Animate On Scroll (AOS) in einer Astro-Anwendung verwenden. Sie durchlaufen den Prozess der Einrichtung eines neuen Astro-Projekts, der Installation des AOS-Moduls und des Hinzufügens einer Einblendanimation zu einer Überschrift
## Voraussetzungen
Sie benötigen Folgendes:
- [Nodejs 18](https://nodejs.org/en/blog/announcements/v20-release-announce) oder höher
## Inhaltsverzeichnis
- [Eine neue Astro-Anwendung erstellen](#create-a-new-astro-application)
- [Animate On Scroll (AOS) in Ihr Astro-Projekt integrieren](#integrate-animate-on-scroll-aos-in-your-astro-project)
- [Animate On Scroll (AOS) SDK installieren](#install-animate-on-scroll-aos-sdk)
- [AOS in der Indexroute verwenden](#use-aos-in-the-index-route)
- [Erstellen und testen Sie Ihre Astro-Anwendung lokal](#build-and-test-your-astro-application-locally)
## Erstellen Sie eine neue Astro-Anwendung
Beginnen wir mit der Erstellung eines neuen Astro-Projekts. Führen Sie den folgenden Befehl aus:
```bash
npm create astro@latest my-app
```
„npm create astro“ ist die empfohlene Methode, um ein Astro-Projekt schnell zu erstellen
Wenn Sie dazu aufgefordert werden, wählen Sie:
- „Leer“, wenn Sie gefragt werden, wie das neue Projekt gestartet werden soll
- „Ja“, wenn Sie gefragt werden, ob Sie Typescript schreiben möchten
- „Streng“, wenn Sie gefragt werden, wie streng Typescript sein soll
- „Ja“, wenn Sie aufgefordert werden, Abhängigkeiten zu installieren
– „Ja“, wenn Sie aufgefordert werden, ein Git-Repository zu initialisieren
Sobald das erledigt ist, können Sie in das Projektverzeichnis wechseln und die App starten:
```bash
cd my-app
npm run dev
```
Die App sollte auf [localhost:4321](http://localhost:4321/) ausgeführt werden.
Kommen wir nun zur Integration von AOS in Ihre Astro-Anwendung
## Integrieren Sie Animate On Scroll (AOS) in Ihr Astro-Projekt
### Installieren Sie das Animate On Scroll (AOS) SDK
Führen Sie den folgenden Befehl aus, um das für die Verwendung von AOS erforderliche Paket zu installieren:
```bash
npm install aos
```
Es installiert Folgendes:
- „aos“: Eine animierte Scroll-Bibliothek
### Verwenden Sie AOS in der Indexroute
Um die Verwendung von AOS zu demonstrieren, fügen Sie einem Text eine Einblendanimation hinzu
Nehmen Sie die folgenden Ergänzungen in der Datei „src/pages/indexastro“ vor:
```astro {14}
---
// File: src/pages/index.astro // [!code focus]
---
// [!code focus]
Astro
Astro
```
Beachten Sie, dass Sie hier zwei AOS-spezifische Attribute verwendet haben:
- „data-aos“: um die Art der gewünschten Animation anzugeben
- „data-aos-delay“: um die Zeit anzugeben, die die Animation dauern soll
Lesen Sie optional mehr über [AOS-Attribute](https://github.com/michalsnik/aos#predefined-options)
Sie können nun also eine Überschrift mit dem Namen „Astro“ sehen. Importieren wir das Modul „aos“ über die folgenden Zusätze in die Indexroute:
```astro
---
// File: src/pages/index.astro // [!code focus]
import 'aos/dist/aos.css'; // [!code ++] // [!code focus]
---
Astro
Astro
// [!code ++] // [!code focus]
```
und du bist fertig!
In den oben genannten Ergänzungen haben Sie die erforderliche CSS-by-AOS-Bibliothek importiert und die AOS-Instanz auf der Clientseite (im Browser) initiiert.
## Erstellen und testen Sie Ihre Astro-Anwendung lokal
Um die Anwendung zu testen, bereiten Sie einen Build vor und führen Sie den Vorschauserver mit dem folgenden Befehl aus:
```bash
npm run build && npm run preview
```
## Abschluss
In dieser Anleitung haben Sie gelernt, wie Sie Animate On Scroll (AOS) in einer Astro-Anwendung verwenden
Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne auf [Twitter](https://twitter.com/direct_messages/create/rishi_raj_jain_).
In dieser Anleitung erfahren Sie, wie Sie Animate On Scroll (AOS) in einer Astro-Anwendung verwenden. Sie durchlaufen den Prozess der Einrichtung eines neuen Astro-Projekts, der Installation des AOS-Moduls und des Hinzufügens einer Einblendanimation zu einer Überschrift
## Voraussetzungen
Sie benötigen Folgendes:
- [Nodejs 18](https://nodejs.org/en/blog/announcements/v20-release-announce) oder höher
## Inhaltsverzeichnis
- [Eine neue Astro-Anwendung erstellen](#create-a-new-astro-application)
- [Animate On Scroll (AOS) in Ihr Astro-Projekt integrieren](#integrate-animate-on-scroll-aos-in-your-astro-project)
- [Animate On Scroll (AOS) SDK installieren](#install-animate-on-scroll-aos-sdk)
- [AOS in der Indexroute verwenden](#use-aos-in-the-index-route)
- [Erstellen und testen Sie Ihre Astro-Anwendung lokal](#build-and-test-your-astro-application-locally)
## Erstellen Sie eine neue Astro-Anwendung
Beginnen wir mit der Erstellung eines neuen Astro-Projekts. Führen Sie den folgenden Befehl aus:
```bash
npm create astro@latest my-app
```
„npm create astro“ ist die empfohlene Methode, um ein Astro-Projekt schnell zu erstellen
Wenn Sie dazu aufgefordert werden, wählen Sie:
- „Leer“, wenn Sie gefragt werden, wie das neue Projekt gestartet werden soll
- „Ja“, wenn Sie gefragt werden, ob Sie Typescript schreiben möchten
- „Streng“, wenn Sie gefragt werden, wie streng Typescript sein soll
- „Ja“, wenn Sie aufgefordert werden, Abhängigkeiten zu installieren
– „Ja“, wenn Sie aufgefordert werden, ein Git-Repository zu initialisieren
Sobald das erledigt ist, können Sie in das Projektverzeichnis wechseln und die App starten:
```bash
cd my-app
npm run dev
```
Die App sollte auf [localhost:4321](http://localhost:4321/) ausgeführt werden.
Kommen wir nun zur Integration von AOS in Ihre Astro-Anwendung
## Integrieren Sie Animate On Scroll (AOS) in Ihr Astro-Projekt
### Installieren Sie das Animate On Scroll (AOS) SDK
Führen Sie den folgenden Befehl aus, um das für die Verwendung von AOS erforderliche Paket zu installieren:
```bash
npm install aos
```
Es installiert Folgendes:
- „aos“: Eine animierte Scroll-Bibliothek
### Verwenden Sie AOS in der Indexroute
Um die Verwendung von AOS zu demonstrieren, fügen Sie einem Text eine Einblendanimation hinzu
Nehmen Sie die folgenden Ergänzungen in der Datei „src/pages/indexastro“ vor:
```astro {14}
---
// File: src/pages/index.astro // [!code focus]
---
// [!code focus]