Verwendung der GreenSock Animation Platform (GSAP) in Astro: Eine Schritt-für-Schritt-Anleitung

Using GreenSock Animation Platform (GSAP) in Astro: A Step-by-Step Guide

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 oder höher

Inhaltsverzeichnis

Eine neue Astro-Anwendung erstellen
Integrieren Sie die GreenSock Animation Platform (GSAP) in Ihr Astro-Projekt
- GreenSock Animation Platform (GSAP) SDK installieren
- GSAP in der Indexroute verwenden
Erstellen und testen Sie Ihre Astro-Anwendung lokal

Erstellen Sie eine neue Astro-Anwendung

Beginnen wir mit der Erstellung eines neuen Astro-Projekts. Führen Sie den folgenden Befehl aus:

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:

cd my-app
npm run dev

Die App sollte auf 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:

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:

---
// File: src/pages/index.astro // [!code focus]
---
// [!code focus]
<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>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background: black;
      }
    </style>
  </head>
  <body>
    <h1>Astro<h1/>
    <input type="checkbox" />
    <div class="box"></div>
  </body>
</html>

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:

---
// File: src/pages/index.astro // [!code focus]
---

<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>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background: black;
      }
    </style>
  </head>
  <body>
    <h1>Astro<h1/>
    <input type="checkbox" />
    <div class="box"></div>
    <script> // [!code focus] // [!code ++]
      import gsap from "gsap"; // [!code focus] // [!code ++]
    </script> // [!code focus] // [!code ++]
  </body>
</html>

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:

---
// File: src/pages/index.astro // [!code focus]
---

<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>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background: black;
      }
    </style>
  </head>
  <body>
    <h1>Astro<h1/>
    <input type="checkbox" />
    <div class="box"></div>
    <script>
      import gsap from "gsap";

      const element = document.querySelector( // [!code focus] // [!code ++]
        '[type="checkbox"]' // [!code focus] // [!code ++]
      ) as HTMLInputElement; // [!code focus] // [!code ++]

      element?.addEventListener("change", () => { // [!code focus] // [!code ++]
        if (element.checked) gsap.to(".box", { x: 200 }); // [!code focus] // [!code ++]
        else gsap.to(".box", { x: 0 }); // [!code focus] // [!code ++]
      }); // [!code focus] // [!code ++]
    </script>
  </body>
</html>

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:

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.