Verwendung der GreenSock Animation Platform (GSAP) in Astro mit Ansichtsübergängen: Eine Schritt-für-Schritt-Anleitung

Black Friday: Enjoy a 25% discount on the starter kits. Use code BLACKFRIDAY2024 at checkout.

LaunchFast Logo LaunchFast

Verwendung der GreenSock Animation Platform (GSAP) in Astro mit Ansichtsübergängen: Eine Schritt-für-Schritt-Anleitung

Rishi Raj Jain
Using GreenSock Animation Platform (GSAP) in Astro with View Transitions: A Step-by-Step Guide

In diesem Leitfaden erfahren Sie, wie Sie die GreenSock Animation Platform (GSAP) in einer Astro-Anwendung mit aktivierten View Transitions verwenden. Sie durchlaufen den Prozess der Einrichtung eines neuen Astro-Projekts, der Aktivierung von View Transitions, der Installation des Gsap-Moduls und der Animation eines Textfeld basierend auf dem Status eines Kontrollkästchens

Sponsored AICardify - AI-generated greeting cards

Generate AI Powered Greeting Cards For Every Occasion

Voraussetzungen

Sie benötigen Folgendes:

Inhaltsverzeichnis

Erstellen Sie eine neue Astro-Anwendung

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

Terminal window
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:

Terminal window
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:

Terminal window
npm install gsap

Der Befehl installiert die folgende Bibliothek:

  • „gsap“: Eine Framework-unabhängige JavaScript-Animationsbibliothek

Erstellen Sie eine gemeinsame Layoutkomponente mit Ansichtsübergängen und GSAP

Um GSAP auf mehreren Seiten Ihrer Astro-Anwendung mit aktiviertem ViewTransitions zu verwenden, erstellen Sie ein gemeinsames Layout, um die Zeit zu sparen, die mit der Wiederholung desselben Codes auf jeder Seite verbunden ist. Erstellen Sie eine Datei mit dem Namen „Layoutastro“ im Verzeichnis „src“ mit dem Folgenden Code:

---
import { ViewTransitions } from "astro:transitions";
---
// [!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} />
<ViewTransitions />
<title>Astro</title>
<style is:global>
.box {
width: 100px;
height: 100px;
background: black;
}
</style>
</head>
<body>
<slot />
<script>
import gsap from "gsap";
window.gsap = gsap;
</script>
</body>
</html>

Im obigen Code haben Sie Folgendes getan, um gsap überall wiederverwenden zu können:

  • Importierte ViewTransitions und verwendete es innerhalb des <html lang="en">-Tags, um Ihren Seiteninhalt ohne die normale, ganzseitige Navigation des Browsers zu aktualisieren auffrischen
  • Definierte ein CSS, um visuell eine 100x100 große Blackbox zu erstellen
  • Das gsap-Modul importiert und innerhalb des Fensters zugänglich gemacht. Jetzt können Sie auf jeder in dieses Layout eingeschlossenen Seite „gsapto“ aufrufen und erwarten, dass es genauso funktioniert, wie es auch in einem Inline-Skript ist. Beachten Sie, dass gebündelte Skripte ausgeführt werden nur einmal, wenn Ansichtsübergänge aktiviert sind. Dies ist hilfreich für Sie, da Sie das Gsap-Modul nicht auf jeder Seite importieren und laden müssen

Wie Giulio Zanchetta richtig vorgeschlagen hat, aktualisieren Sie „src/envdts“, um die seitenübergreifende Unterstützung von Gsap-Typen an einer beliebigen Stelle im Skript-Tag sicherzustellen:

/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />
interface Window { // [!code focus]
gsap: typeof import("gsap");
}

GSAP auf mehreren Seiten verwenden

Um die Verwendung von GSAP zu demonstrieren, animieren Sie ein Kästchen nach links, rechts, oben und unten, basierend auf dem aktivierten Status eines Kontrollkästchens auf mehreren Seiten

Erstellen wir zunächst das Kästchen und das Kontrollkästchen in der Standardindexroute. Auf dieser Seite animieren Sie das Kästchen von links nach rechts, wenn das Kontrollkästchen aktiviert ist. Ersetzen Sie den vorhandenen Code in der Datei „src/pages/indexastro“ durch Folgendes:

---
import Layout from "../Layout.astro";
---
// [!code focus]
<Layout>
<h1>Astro</h1>
<input type="checkbox" />
<div class="box"></div>
<a href="/second">Click Me</a>
</Layout>

Im obigen Code haben Sie ein Kontrollkästchen und ein div-Element erstellt, das das Kästchen darstellt. Außerdem haben Sie einen Hyperlink zur Route „/second“ hinzugefügt

Erstellen Sie nun eine Sekundeastro“ im Verzeichnis „src/pages“ mit dem folgenden Code, in dem Sie das Feld nach oben und unten animieren, wenn das Kontrollkästchen aktiviert ist:

---
import Layout from "../Layout.astro";
---
// [!code focus]
<Layout>
<h1>Astro</h1>
<input type="checkbox" />
<div class="box"></div>
<a href="/">Click Me</a>
</Layout>

Im obigen Code haben Sie ein Kontrollkästchen und ein div-Element erstellt, das das Kästchen darstellt. Außerdem haben Sie einen Hyperlink zur Route „/“ hinzugefügt

Um nun das Feld mit GSAP zu animieren, wenn das Kontrollkästchen angeklickt wird, nehmen Sie die folgenden Ergänzungen in einer der Routen vor:

---
import Layout from "../Layout.astro";
---
// [!code focus]
<Layout>
<h1>Astro</h1>
<input type="checkbox" />
<div class="box"></div>
<a href="/second">Click Me</a>
<script>
document.addEventListener(
"astro:page-load",
() => {
const element = document.querySelector('[type="checkbox"]');
element?.addEventListener("change", () => {
if (element.checked) gsap.to(".box", { x: 200 });
else gsap.to(".box", { x: 0 });
});
},
{ once: false }
);
</script>
</Layout>

und die folgende Änderung in der anderen Route:

---
import Layout from "../Layout.astro";
---
// [!code focus]
<Layout>
<h1>Astro</h1>
<input type="checkbox" />
<div class="box"></div>
<a href="/">Click Me</a>
<script>
document.addEventListener(
"astro:page-load",
() => {
const element = document.querySelector('[type="checkbox"]');
element?.addEventListener("change", () => {
if (element.checked) gsap.to(".box", { y: 200 });
else gsap.to(".box", { y: 0 });
});
},
{ once: false }
);
</script>
</Layout>

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

Beachten Sie, dass der Ereignis-Listener „change“ in den folgenden Code eingebettet ist:

document.addEventListener(
"astro:page-load",
() => {
},
{ once: false }
);

Der obige Code stellt sicher, dass er bei jedem Besuch der Seite, die ihn enthält, im Browser ausgeführt wird, sei es beim Navigieren oder beim ersten Laden. Damit der Listener nach der Navigation zu einer neuen Seite oder beim direkten Öffnen einer Seite an das Box-Element angehängt werden kann geladen ist, ist das Ereignis astro:page-load praktisch. Außerdem stellt die Verwendung von Once: False sicher, dass der darin enthaltene Code korrekt ist -ran, wenn die Seite während einer Sitzung mehrmals besucht wird

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:

Terminal window
npm run build && npm run preview

Abschluss

In dieser Anleitung haben Sie erfahren, wie Sie die GreenSock Animation Platform (GSAP) in einer Astro-Anwendung mit aktivierten Ansichtsübergängen verwenden

Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne auf Twitter.

Credits

– Vielen Dank an Martin für eine detaillierte Überprüfung und die Lösungsvorschläge in diesem Artikel

Learn More Authentifizieren von Benutzern in Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung
Authentifizieren von Benutzern in Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung November 24, 2024
Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024
Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024 October 30, 2024
6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte
6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte October 26, 2024