---
title: "Verwendung der GreenSock Animation Platform (GSAP) in Astro"
description: "Wie verwende ich GSAP (GreenSock Animation Platform) in der Astro-Anwendung?"
source: "https://www.launchfa.st/de/blog/gsap-astro"
author: "Rishi Raj Jain"
created_at: 2024-04-15T00: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 die GreenSock Animation Platform (GSAP) in einer Astro-Anwendung verwenden. Sie durchlaufen den Prozess der Einrichtung eines neuen Astro-Projekts, der Installation des Gsap-Moduls und der Animation eines Textfelds basierend auf dem Status eines Kontrollkästchens
## 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)
- [Integrieren Sie die GreenSock Animation Platform (GSAP) in Ihr Astro-Projekt](#integrate-greensock-animation-platform-gsap-in-your-astro-project)
- [GreenSock Animation Platform (GSAP) SDK installieren](#install-greensock-animation-platform-gsap-sdk)
- [GSAP in der Indexroute verwenden](#use-gsap-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 GSAP in Ihre Astro-Anwendung
## Integrieren Sie die GreenSock Animation Platform (GSAP) in Ihr Astro-Projekt
### Installieren Sie das GreenSock Animation Platform (GSAP) SDK
Führen Sie den folgenden Befehl aus, um das erforderliche Paket für die Verwendung von GSAP zu installieren:
```bash
npm install gsap
```
Der Befehl installiert die folgende Bibliothek:
- „gsap“: Eine Framework-unabhängige JavaScript-Animationsbibliothek
### Verwenden Sie GSAP in der Indexroute
Um die Verwendung von GSAP zu demonstrieren, animieren Sie ein Kästchen links und rechts basierend auf dem aktivierten Status eines Kontrollkästchens
Erstellen wir zunächst das Kästchen und das Kontrollkästchen in der Standardindexroute. Nehmen Sie die folgenden Ergänzungen in der Datei „src/pages/indexastro“ vor:
```astro {12-18,22-23}
---
// File: src/pages/index.astro // [!code focus]
---
// [!code focus]
Astro
Astro
```
Jetzt können Sie ein schwarzes Kästchen und ein Kontrollkästchen darüber sehen. Importieren wir das Modul „gsap“ in die Indexroute über die folgenden Ergänzungen:
```astro
---
// File: src/pages/index.astro // [!code focus]
---
Astro
Astro
// [!code focus] // [!code ++]
```
Und jetzt bleibt Ihnen nur noch ein Schritt, nämlich das Animieren der Box mit GSAP, wann immer das Kontrollkästchen angeklickt wird. Nehmen wir die folgenden Ergänzungen in der Indexroute vor und verstehen, was sie bewirken:
```astro
---
// File: src/pages/index.astro // [!code focus]
---
Astro
Astro
```
In den oben genannten Ergänzungen haben Sie einen Ereignis-Listener für das „Change“-Ereignis des Kontrollkästchens erstellt. Dieses Ereignis wird immer dann ausgelöst, wenn das Kontrollkästchen aktiviert oder deaktiviert ist. Außerdem animieren Sie je nach Status des Kontrollkästchens entweder die Schaltfläche zum Verschieben 200 Einheiten nach rechts, oder kehren Sie zur ursprünglichen Position zurück
## 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 diesem Leitfaden haben Sie gelernt, wie Sie die GreenSock Animation Platform (GSAP) 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 die GreenSock Animation Platform (GSAP) in einer Astro-Anwendung verwenden. Sie durchlaufen den Prozess der Einrichtung eines neuen Astro-Projekts, der Installation des Gsap-Moduls und der Animation eines Textfelds basierend auf dem Status eines Kontrollkästchens
## 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)
- [Integrieren Sie die GreenSock Animation Platform (GSAP) in Ihr Astro-Projekt](#integrate-greensock-animation-platform-gsap-in-your-astro-project)
- [GreenSock Animation Platform (GSAP) SDK installieren](#install-greensock-animation-platform-gsap-sdk)
- [GSAP in der Indexroute verwenden](#use-gsap-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 GSAP in Ihre Astro-Anwendung
## Integrieren Sie die GreenSock Animation Platform (GSAP) in Ihr Astro-Projekt
### Installieren Sie das GreenSock Animation Platform (GSAP) SDK
Führen Sie den folgenden Befehl aus, um das erforderliche Paket für die Verwendung von GSAP zu installieren:
```bash
npm install gsap
```
Der Befehl installiert die folgende Bibliothek:
- „gsap“: Eine Framework-unabhängige JavaScript-Animationsbibliothek
### Verwenden Sie GSAP in der Indexroute
Um die Verwendung von GSAP zu demonstrieren, animieren Sie ein Kästchen links und rechts basierend auf dem aktivierten Status eines Kontrollkästchens
Erstellen wir zunächst das Kästchen und das Kontrollkästchen in der Standardindexroute. Nehmen Sie die folgenden Ergänzungen in der Datei „src/pages/indexastro“ vor:
```astro {12-18,22-23}
---
// File: src/pages/index.astro // [!code focus]
---
// [!code focus]