Seitenanimationen in Next.js - Was ist Framer Motion?

Animationen sind ein Muss in der heutigen Webentwicklung, da sie die Benutzererfahrung und die Projektqualität erhöhen. Erfahren Sie mehr über Framer Motion, eine leistungsstarke React-Bibliothek für Animationen.

Animationen sind ein sehr wichtiger Aspekt bei der Erstellung moderner Webanwendungen, insbesondere wenn es darum geht, die Benutzererfahrung zu verbessern oder die Aufmerksamkeit auf wichtige Teile der Benutzeroberfläche der Anwendung zu lenken. Gut ausgeführte Animationen verbessern die Qualität des Projekts, erhöhen dessen Attraktivität und sorgen letztendlich dafür, dass die Benutzer häufiger zurückkehren. Die Erstellung von Animationen ist jedoch nicht immer einfach. In diesem Artikel teile ich meine Erfahrungen mit Framer Motion, einer Open-Source-Bibliothek, die die Erstellung von Animationen im React-Umfeld beschleunigt.

Arten von Animationen

Animationen können in mehrere grundlegende Typen unterteilt werden: 

Ein-/Ausblenden - Das animierte Element wird zunehmend sichtbar/unsichtbar. Dieser Effekt ist oft beim Scrollen einer Website zu sehen. Ein Beispiel für eine Einblende-Animation:

Herein-/Herausschieben - Das animierte Element bewegt sich auf dem Bildschirm. Herein-/Herausschiebe-Animationen werden oft mit Ein-/Ausblende-Animationen kombiniert. Ein Beispiel für eine Herein- + Einblende-Animation:

Drehen und Skalieren - Dreh-Animationen sind solche, bei denen das Element um seine eigene Achse rotiert, während bei Skalierungs-Animationen das animierte Element seine Größe verringert oder erhöht. Ein Beispiel für eine Animation, bei der der Button beim Hover seine Größe erhöht und beim Klicken um seine eigene Achse rotiert:

Diese Animationen können als grundlegend betrachtet werden. Es steht uns jedoch nichts im Wege, diese Animationen zu kombinieren und fortgeschrittene und komplexe Effekte zu schaffen, die die Aufmerksamkeit und das Interesse der Benutzer auf sich ziehen.

Um qualitativ hochwertige komplexe Animationen zu erstellen, benötigen wir meistens spezielle, dedizierte Bibliotheken, die diesen Prozess erheblich vereinfachen und beschleunigen. Eine solche Bibliothek im React.js-Umfeld ist Framer Motion.

Was ist Framer Motion?

Framer Motion ist eine Open-Source-Bibliothek, die eine einfache und schnelle Erstellung von Animationen im React-Umfeld ermöglicht. Durch die Nutzung der gleichen Konzepte wie React ermöglicht sie unter anderem das Animieren von Elementen, die aus dem DOM-Baum entfernt werden, das Verwalten des Komponentenstatus und ihres Animationsstatus über speziell vorbereitete Hooks, das Erstellen von benutzerdefinierten Hooks oder das Reduzieren der Bundle-Größe durch asynchrones Laden von Animationen.

Die Haupt- und am häufigsten verwendeten Komponenten in der Framer Motion-Bibliothek sind die motion-Komponenten. Wie in der Dokumentation zu lesen ist: “Motion-Komponenten sind DOM-Primitiven, die für 60fps-Animationen und Gesten optimiert sind.” Kurz gesagt, Motion-Komponenten sind äquivalent zu regulären HTML-Elementen wie div, p, h1, button, angereichert mit speziellen Props, die eine einfache Animation ermöglichen.

Die am häufigsten verwendeten Props sind initial, mit dem wir die Eigenschaften festlegen können, von denen die Animation starten soll, animate - in dem wir die Eigenschaften angeben, die unser animiertes Element während der Animation anstreben soll, und exit, das angibt, was mit dem animierten Element passieren soll, wenn es aus dem DOM-Baum entfernt wird.

Angenommen, wir möchten einen blauen Quadrat haben, das während der Animation die Farbe zu grün ändert, an Größe zunimmt und sich um 360 Grad dreht. Um diesen Effekt mit Framer Motion zu erzielen, benötigen wir nur ein paar zusätzliche Zeilen Code.

Wie Sie sehen können, ein Kinderspiel! Wir setzen die Anfangswerte und die Werte, auf die unser Element animiert, und das war's!

Wie im obigen Beispiel zu sehen ist, haben wir eine Eigenschaft namens transition verwendet. Dank dieser können wir unter anderem den Typ der Animation, die Zeit, die Verzögerung usw. einfach angeben.

Es gibt mehrere Arten von Animationen. In unserem Beispiel haben wir Feder-Animationen verwendet, die der Animation ein realistischeres Aussehen verleihen. Animationen können auch auf viele Arten konfiguriert werden. Wir haben die Möglichkeit, Eigenschaften wie Masse, Rückprall, Dämpfung, Steifigkeit oder Geschwindigkeit zu ändern. Zum Beispiel wird das Ändern der Masseigenschaft auf einen höheren Wert dazu führen, dass das Objekt eine größere Masse ausstrahlt und die Bewegung viel träger wird. Die verfügbaren Eigenschaften der Federanimation können hier überprüft werden.

Die obige Animation beginnt sofort, wenn das Element gerendert wird, d.h. nachdem die Seite aktualisiert wurde. Was ist mit Situationen, in denen wir möchten, dass unser Element als Reaktion auf das Scrollen animiert wird, d.h. nur wenn es in unserem Sichtbereich erscheint? Alles, was wir tun müssen, ist, die animate-Eigenschaft in whileInView zu ändern.

Wie Sie sehen können, haben wir die animate-Eigenschaft auf whileInView umgeschaltet. Unser Quadrat beginnt nur zu animieren, wenn es im Sichtbereich erscheint. Wir haben auch das Attribut viewport once = true hinzugefügt, damit unser Quadrat nicht erneut animiert wird, wenn es aus dem Sichtbereich gescrollt wird und wieder erscheint. Sie können auch sehen, wie sich das Quadrat verhält, wenn wir seine Masseigenschaft erhöhen.

Diese Beispiele waren nur einfache Animationen mit einem einzelnen Element. Was ist, wenn wir möchten, dass die Animationen auf eine größere Anzahl von Komponenten angewendet werden? Müssen wir das animierte Objekt auf jedes Element anwenden, das wir animieren möchten? Und was ist, wenn wir möchten, dass unsere Elemente mit einer bestimmten Zeitverzögerung vom zuletzt animierten Element animiert werden? Müssen wir jedes Mal die Verzögerungseigenschaft umschiffen? Um diese Frage zu beantworten, schauen wir uns die variants-Eigenschaft an. Variants ermöglichen es uns, Animationen zu definieren, die sich durch den DOM-Baum ausbreiten. Lassen Sie uns das folgende Beispiel betrachten.

Wie im obigen Beispiel zu sehen ist, setzen wir die animate-Eigenschaft nicht als einzelnes Objekt, sondern verwenden stattdessen die variants-Eigenschaft. 

Wir definieren die offScreen- und onScreen-Varianten und animieren unsere Liste, indem wir die Opazität ändern. Dann nutzen wir die Tatsache, dass diese Varianten im DOM-Baum nach unten propagieren und geben an, was mit jedem einzelnen Listenelement - den Square-Komponenten - passieren soll. Darüber hinaus haben wir durch die Verwendung von Varianten die Möglichkeit, die Kinder des animierten Elements zu verwalten, beispielsweise durch die Verwendung der staggerChildren-Eigenschaft. Dies bewirkt, dass jedes nachfolgende Element innerhalb unserer Liste mit einer festgelegten Verzögerung zum vorherigen angezeigt wird. Sie können mehr über Varianten hier lesen. 

Die obigen Beispiele zeigen nur die grundlegende Funktionalität, die wir durch die Verwendung von Framer Motion erhalten. Ich empfehle Ihnen, sich mit der Dokumentation vertraut zu machen und zu sehen, was die Bibliothek sonst noch zu bieten hat. 

Ich habe zuvor erwähnt, dass Framer Motion es uns ermöglicht, Elemente zu animieren, die aus dem DOM-Baum entfernt werden. Das ist wahr, aber wir werden dies im nächsten Kapitel besprechen.

Framer Motion in Next.js

Das Animieren von Elementen während ihrer Entfernung ist sehr einfach. Alles, was wir tun müssen, ist, unsere animierte Komponente in einen speziellen Wrapper namens AnimatePresence. Der Wrapper ermöglicht es uns, die Unmount-Operation zu verzögern, bis die Animation abgeschlossen ist, aber wenn wir wollen, dass unsere Komponente animiert wird, müssen wir daran denken, die Exit-Animation zu definieren.

Um zu demonstrieren, wie wir AnimatePresence verwenden können, werden wir eine einfache Anwendung mit dem Next.js-Framework erstellen. Die Anwendung wird zwei Seiten haben, und die Übergänge zwischen ihnen werden animiert sein. Also, lassen Sie uns einige Seitenübergänge erstellen.

Lassen Sie uns mit der Erstellung des Projekts beginnen und die notwendigen Bibliotheken installieren. Die Anleitung zur Erstellung eines neuen Projekts mit Next.js finden Sie hier. Wir werden auch TypeScript im Projekt verwenden, daher empfehle ich, das Projekt mit dem --typescript-Flag zu generieren.

Okay, wir haben das Projekt, lassen Sie uns nun die notwendigen Bibliotheken installieren. Neben der Framer Motion-Bibliothek werden wir auch Tailwind CSS verwenden, das es uns ermöglicht, schnell zu stylen, ohne CSS-Dateien erstellen zu müssen. Um die Framer Motion-Bibliothek zu installieren, fügen Sie einfach npm i framer-motion in die Konsole ein und installieren Sie sie. Die Installation von Tailwind ist etwas komplizierter, und die vollständigen Anweisungen finden Sie hier. Unser Interesse gilt den Schritten 2-4.

Zuerst bearbeiten wir unsere pages/index.tsx-Datei. Wir werden einen einfachen Header und drei Karten anzeigen, die Links zu unserer nächsten Seite sind. Jede der Komponenten wird Animationen haben, die mit Variants definiert sind. Um den Code im Fall eines Blogbeitrags leichter lesbar zu machen, werde ich alles in einer Datei unterbringen. Die index.tsx-Datei sieht folgendermaßen aus:

Die erwähnten Karten sind Links zu unserer zweiten Seite, die wir jetzt erstellen werden. Fügen Sie im Seitenordner eine Datei [id].tsx. hinzu. Auf dieser Seite werden wir einen kurzen Text zusammen mit einem Link haben, der zur Startseite zurückführt. Die gesamte Datei sieht folgendermaßen aus:

Wenn wir jetzt das Projekt ausführen, werden wir leider feststellen, dass unsere Animationen nicht funktionieren. Das liegt daran, dass wir Variants für onEnter und initial erstellt und ihnen unsere Elemente zugewiesen haben, aber nirgendwo definiert haben, auf welche spezifischen Eigenschaften sich unsere Variants beziehen, wie im Beispiel von SquareList oben. Das werden wir jetzt in einer separaten Komponente tun.

Lassen Sie uns eine Layout-Komponente erstellen. Lassen Sie uns das erwähnte AnimatePresence darin rendern.

Unsere neue Komponente wird ein Wrapper für die gesamte Anwendung sein. Hier gibt es ein div-Element, das unseren Übergang von einer Seite zur anderen animiert. Wir definieren hier die zuvor erwähnten Variants und weisen sie den entsprechenden Eigenschaften zu. Wir wissen jetzt, dass Variants die Fähigkeit haben, tief in den DOM-Baum zu propagieren, sodass alle Elemente Zugriff auf Änderungen in Variants haben, bis sie ihre eigenen Eigenschaften wie animate definieren.

Während der onExit-Animation werden wir neben der Änderung der Opazität die clipPath-Eigenschaft verwenden, um eine Ausschneideanimation unserer Seite von links nach rechts zu erstellen. Wir müssen auch daran denken, dass ein Element, um richtig animiert zu werden, bevor es unmounted wird, eine eindeutige key-Eigenschaft haben muss, die es AnimatePresence ermöglicht, die Anwesenheit des Elements im DOM-Baum zu verfolgen. Die neu erstellte Komponente wird in der _app.tsx-Datei gerendert.

Wenn wir jetzt unser Projekt ausführen, sollten wir den folgenden Effekt sehen:

Wie Sie sehen können, haben wir erfolgreich eine einfache Übergangsanimation zwischen Seiten erstellt. Darüber hinaus hat jedes unserer Elemente eine Fade-in- und Slide-in-Animation. Ich empfehle dringend, mit dem verfügbaren Code zu experimentieren und zu überprüfen, wie er auf Änderungen reagiert.

Abschließende Gedanken

Wie wir sehen können, ist Framer Motion eine sehr benutzerfreundliche Bibliothek zur Erstellung von Animationen in React. Sie bietet viele Komponenten und Funktionen, die den Prozess der Erstellung von Animationen erheblich beschleunigen. Die meisten davon wurden nicht erneut angesprochen, aber ich empfehle Ihnen dringend, sich mit ihnen vertraut zu machen. Es ist auch erwähnenswert, dass die gut geschriebene Dokumentation die Arbeit erheblich vereinfacht.

Ist es sinnvoll, Framer Motion als Bibliothek für Animationen in Betracht zu ziehen? Absolut! Bevor wir jedoch eine endgültige Entscheidung treffen, müssen wir uns daran erinnern, dass Framer Motion trotz seiner großartigen Eigenschaften viel Konkurrenz hat, wie zum Beispiel Gsap, React-spring und andere.

Schau dir auch an:

• Next.js - Was ist das und warum sollten wir es verwenden? —  Sieh dir die Vor- und Nachteile der Verwendung von Next.js an, um zu entscheiden, ob es die richtige Wahl für dein nächstes Projekt ist.
• Warum ist das /App-Verzeichnis ein großer Schritt für Next.js? — Erfahre mehr über die Änderungen, die Next.js 13 mit sich brachte, und warum das wichtig ist.