JavaScript-Animationsbibliotheken: 10 beliebte Optionen

Ich liebe es, mit verschiedenen Animationseffekten zu experimentieren, besonders mit solchen, die einfach sind und mit CSS implementiert werden können. Aber wenn wir das Gesamtbild betrachten, bringen Sie CSS-Animationen nur so weit. Und wer komplexe und interaktive Benutzererlebnisse schaffen will, muss früher oder später auf JavaScript umsteigen.

Der Hauptvorteil der Verwendung von JavaScript für Animationseffekte besteht darin, dass Sie viel mehr von der Animationslogik steuern können. Dazu gehören fließende Übergänge, die Steuerung von DOM-Status und -Antwort, aber auch die Verwendung von 2D- und 3D-Grafiken dank WebGL.

Die Typen von JavaScript-Animationsbibliotheken

Da es also JS-Animationsbibliotheken in vielen Formen gibt, hilft es wirklich, den spezifischen Fokusbereich einzugrenzen. Viele der Engines und Frameworks werden nicht nur für Front-End-Sachen verwendet, sondern auch zum Erstellen von Spielen und anderen interaktiven Inhalten.

Für diese spezielle Zusammenfassung konzentriere ich mich auf Bibliotheken, die am häufigsten in der Front-End-Entwicklung verwendet werden, entweder allein oder zusammen mit einem der aktuellen Frameworks.

Zu gegebener Zeit werde ich erwägen, dieser Liste weitere Bibliotheken hinzuzufügen, die kleiner sind, aber dennoch sinnvolle Möglichkeiten zum Hinzufügen interaktiver Animationen zu Ihren Projekten bieten.

Jede Bibliothek hat Links zu ihrer Website und GitHub-Seite. Ich habe auch ein CodePen-Beispiel hinzugefügt, das Sie von dieser Seite aus ausführen können, sowie zusätzliche Ressourcen – die entweder Tutorials oder Videoanleitungen sind.

#1 – Drei.js

Three.js ist die ideale Bibliothek zum Erstellen von animierten 3D-Effekten, die Sie bei der kreativen Website-Entwicklung verwenden. Three.js beseitigt die Notwendigkeit für Entwickler, sich mit WebGL vertraut zu machen, und kann sich stattdessen auf die Erstellung interaktiver 3D-Effekte ohne die Komplexität konzentrieren.

Im High-End-Bereich wird Three.js verwendet, um interaktive virtuelle Erlebnisse wie Mozilla Hubs zu erstellen. Darüber hinaus wird die Bibliothek auch häufig zum Erstellen immersiver Zielseitenerlebnisse verwendet. Weltklasse-Publisher und Leitartikel verwenden Three.js seit Jahren, um datenbasierte Seiten mit dynamischen Updates zu erstellen.

Wenn Sie die Homepage besuchen, sind dort eine Vielzahl von hervorgehobenen Projekten aufgelistet, die Ihnen viel Inspiration/Klarheit geben sollten, wie diese Bibliothek in alltäglichen Umgebungen verwendet wird.

Three.js-Beispielanimation

Siehe Pen Mesh Line Waves Background – THREE.js von CP Designer (@cpandya) auf CodePen.

Three.js Zusätzliche Ressourcen

• Wie wir den GitHub-Globus erstellt haben
• Pixelverzerrungseffekt mit Three.js

#2 – Anime.js

Anime.js von Julian Garnier ist die wohl zweitbekannteste Bibliothek zur Einbindung von Animationen in webbasierte Projekte. Seine Popularität rührt von integrierten Tools her, die den Prozess der Animation von CSS-, SVG- und DOM-Elementen beschleunigen.

Sie können beispielsweise bestimmte CSS-Selektoren anvisieren und dann eine verfeinerte Animationslogik über JavaScript anwenden, anstatt die @keyframes selbst zu schreiben.

 anime({ targets: '.staggering-axis-grid-demo .el', translateX: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'x'}), translateY: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'y'}), rotateZ: anime.stagger([0, 90], {grid: [14, 5], from: 'center', axis: 'x'}), delay: anime.stagger(200, {grid: [14, 5], from: 'center'}), easing: 'easeInOutQuad' });

Allein mit dem obigen Snippet können Sie einen Effekt erzielen, der so aussieht:

Wenn Sie dies mit CSS tun würden, müssten Sie jeden einzelnen Rasterblock auswählen und eine separate Logik dafür schreiben. Das ist nicht nur unpraktisch, sondern auch eine Menge Arbeit. Auf der Dokumentationsseite von Anime.js finden Sie viele ähnliche Beispiele. Und die folgende Demo geht noch einen Schritt weiter, um zu zeigen, wie diese Bibliothek in der modernen Front-End-Entwicklung verwendet werden kann.

Anime.js-Beispielanimation

Sehen Sie sich die Pen anime.js-Logoanimation von Julian Garnier (@juliangarnier) auf CodePen an.

Anime.js Zusätzliche Ressourcen

• Anime.js-Tutorial – JavaScript-Animations-Engine in 10 Minuten
• Animation der Benutzeroberfläche mit Anime.js

#3 – Popmotion

Popmotion ist eine in TypeScript geschriebene Low-Level-Animationsbibliothek. Es ist auch die Bibliothek, die die beliebte Framer Motion-Bibliothek antreibt (wir haben sie in diesem Artikel aufgelistet), die in React-Projekten verwendet wird. Wenn Sie unvoreingenommen sind, können Sie Popmotion verwenden, um benutzerdefinierte Effekte zu integrieren, indem Sie zusätzliche Funktionen schreiben, die Sie verwenden möchten.

Wie der Name schon sagt, eignet sich Popmotion besonders gut zum Animieren von Elementen der Benutzeroberfläche durch die Verwendung verschiedener bewegungsbasierter Animationen. Dazu gehören Effekte wie Easing, Springs, Keyframes und kompliziertere Übergangseffekte. Das folgende Beispiel zeigt gut die praktische Anwendung von Animationseffekten für Komponentenelemente.

Popmotion-Beispielanimation

Sehen Sie sich die Pen Popmotion-Demos von Arden (@aderaaij) auf CodePen an.

Zusätzliche Popmotion-Ressourcen

• Visualisieren Sie den Pancakes-Algorithmus mit React und Popmotion.io
• Fügen Sie Ihrer Winkel-App mit Popmotion Frühlingsanimationen hinzu

#4 – mo.js

Mo.js konzentriert sich auf Motion Graphics und zeichnet sich durch eine einfache Codestruktur aus, die Sie in eigenständigen Projekten, aber auch zusammen mit Frameworks wie React implementieren können.

Und da Mo.js mit einer eigenen deklarativen API ausgeliefert wird, können Sie jeden Schritt der Animation steuern. Dazu gehört nicht nur, die Logik für das zu definieren, was Sie erreichen möchten, sondern auch, wie Sie dorthin gelangen. Die Bibliothek enthält vorgefertigte Komponenten und Beispiele, die auf visuell ansprechende Benutzererlebnisse zugeschnitten sind.

Hier ist ein Beispielausschnitt:

 const travelCircleExpand = new mojs.Shape({ fill: COLORS.BLACK, radius: 126, scale: { .1: 1 }, opacity: { 0 : 1 }, easing: 'cubic.out', duration: 400, isForce3d: true, isTimelineLess: true, });

Wie Sie sehen können, ist ein Großteil der Logik vordefiniert. Anstatt sich also eigene Ideen einfallen zu lassen, können Sie die bereitgestellten Eigenschaften zur Kenntnis nehmen und sich nach oben entwickeln. Der Tutorial-Abschnitt in der Dokumentation enthält einige Beispiele für praktische Anwendungen, insbesondere Effekte, die winzige, aber aussagekräftige Animationen zu alltäglichen Webseitenelementen hinzufügen.

mo.js Beispielanimation

Siehe Pen Link Hover Effects w/ mo.js von Mike Quinn (@mprquinn) auf CodePen.

mo.js Zusätzliche Ressourcen

• So verwenden Sie MoJS mit React
• MoJS in den Griff bekommen

#5 – p5.js

p5.js ist die JavaScript-Implementierung von Processing – einer separaten „Sprache“, die für die Verwendung durch bildende Künstler vorgesehen ist. Im Gegensatz zu einigen der Beispiele, die wir bisher gesehen haben, ist p5.js eine universelle Animationsbibliothek, die nicht nur Lösungen für praktische Anwendungen, sondern auch für robustere und komplexere Projekte bietet. Dazu gehört die vollständige Unterstützung für 2D- und 2D-Effekte.

Was die Verwendung von p5.js in Website-Projekten betrifft, eröffnet die Bibliothek einen Weg für tiefgreifende Kreativität. Sie können beispielsweise schnell Bootstrap-Effekte wie Nebelwände, animierte Bäume und datenbasierte Zielseiten erstellen, mit denen Benutzer interagieren können.

Sie müssen alle Zeichnungen selbst erstellen, aber mit der Anzahl der für p5.js verfügbaren Ressourcen – ich denke, Sie werden feststellen, dass der Einstieg nicht so schwierig ist. Und es versteht sich von selbst, dass die Community hinter diesen beiden Projekten sehr engagiert ist.

p5.js Beispielanimation

Siehe Pen P5.JS Twist and Turn. von Sdsmnc (@supastrocat) auf CodePen.

p5.js Zusätzliche Ressourcen

• Verarbeitung und p5.js
• Sonnenuntergänge und Sternschnuppen in p5.js

#6 – Bewegung

React ist so beliebt, dass es nur Sinn macht, eine eigene Animationsbibliothek zu haben. Framer Motion wird mit einer vorgefertigten API geliefert, mit der React-Entwickler den Prozess zum Erstellen animierter Komponenten vereinfachen können, aber auch einige der Hürden beseitigt, die mit dem Erlernen von CSS und seinen unabhängigen Animationseigenschaften verbunden sind. Und es ist ganz einfach damit zu arbeiten.

Ein Beispielschnipsel:

 import { motion } from "framer-motion" export const MyComponent = () => ( <motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} /> )

Animationen in animate werden durch die motion und Animationseigenschaften definiert. Auf diese Weise können Sie ganze Komponenten und ihre inneren Elemente auswählen, die Sie dann mit Ihrer benutzerdefinierten Animationslogik anreichern können. Der Smashing -Artikel von Nefe Emadamerho-Atori im Ressourcenbereich ist ein guter Ausgangspunkt, um zu sehen, wie Framer Motion funktioniert.

Bewegungsbeispiel-Animation

Sehen Sie sich den Pen Laser Sight Button von codebro (@codebro) auf CodePen an.

Motion Zusätzliche Ressourcen

• Vorstellung von Framer Motion
• Responsive Animationen mit Framer Motion

#7 – GSAP

Ich habe in letzter Zeit ziemlich häufig gesehen, wie GSAP-Kunst auf Twitter geteilt wird. Aber es kommt nicht überraschend. Viele der Animationen und dynamischen Effekte, die wir in kreativen Projekten sehen, wurden dank der robusten GSAP-Engine ermöglicht.

Die Bibliothek ist nicht nur auf Leistung optimiert, sondern auch hochkompatibel mit Ihren bevorzugten Technologien. Dazu gehören Frameworks wie React & Vue, aber auch Bibliotheken wie jQuery mit zusätzlicher Unterstützung für mobile und veraltete Webbrowser.

Da GSAP in der Lage ist, praktisch jede Art von Webelement (von CSS über Canvas bis hin zu DOM-Objekten) abzufragen und zu animieren, können Sie es für etwas so Einfaches wie einen Spinner-Effekt verwenden oder alles daran setzen, wirklich dynamische Website-Erlebnisse zu erstellen.

Der Showcase- Bereich enthält Hunderte von Beispielprojekten, an denen Entwickler gearbeitet haben. Probieren Sie es aus, um sich inspirieren zu lassen, aber auch, um zu sehen, was mit dieser Bibliothek möglich ist.

GSAP-Beispielanimation

Sehen Sie sich das Pen Hulu Originals Intro von Hyperplexed (@Hyperplexed) auf CodePen an.

Zusätzliche GSAP-Ressourcen

• Erstaunliche Animationstechniken mit GSAP
• Erstellen aufwändiger Website-Animationssequenzen – GSAP 3-Tutorial

#8 – Papier.js

Paper.js ist eine Animationsbibliothek mit einem strikten Fokus auf die Animation von Vektorgrafiken. Mit diesem Ansatz können Sie nicht nur statische Effekte, sondern auch interaktive dynamische Erfahrungen machen. Paper.js ist insbesondere bei Animationsprojekten beliebt, bei denen der Benutzer Objekte ziehen, neu anordnen und benutzerdefinierte Eingaben vornehmen kann.

Objekte können durch Ebenen kategorisiert werden, wobei jede Ebene eine benutzerdefinierte Animationsspezifikation hat. Dies ist praktisch, wenn Sie an komplexen Strukturen arbeiten, da Sie bestimmte Ebenen entfernen/deaktivieren können, sofern dies nicht vom Benutzer angefordert wird.

Paper.js-Beispielanimation

Siehe Pen Filling Glasses – Paper.js von Fiorald Ismaili (@Fiorald) auf CodePen.

Paper.js Zusätzliche Ressourcen

• Paper.js Vektor löschen
• Wellen in Paper.js

#9 – Webanimationen

Diese Bibliothek ist ein direkter JavaScript-Port der Web-Animations-API. Die Bibliothek lässt sich direkt in die Element.animate() -Spezifikation integrieren, sodass Sie Animationsfunktionen verwenden können, die normalerweise mit CSS-Logik geschrieben wurden. Die Autoren erklärten es mit den Worten:

„Eine JavaScript-Implementierung der Webanimations-API, die Webanimationsfunktionen in Browsern bereitstellt, die sie nicht nativ unterstützen. Das Polyfill greift auf die native Implementierung zurück, wenn eine verfügbar ist.“

Webanimationen Beispielanimation

Sehen Sie sich die Pen Imperative Animations von Sam Thorogood (@samthor) auf CodePen an.

Zusätzliche Ressourcen für Webanimationen

• API für Webanimationen – Web-APIs | MDN
• Webanimationen Ebene 2 | W3C

#10 – Proton

Partikeleffekte sind in modernen Webdesign-Trends definitiv ganz oben . Designer setzen sie nicht nur für Hintergrundeffekte ein, sondern auch für interessante Übergänge und sogar Präsentationen für kreative Projekte. Die Proton-Bibliothek ist speziell auf die Bedürfnisse der schnellen Skalierung kreativer Partikeleffekte zugeschnitten.

Sie können beispielsweise Funkeneffekte und kollisionsbasierte Interaktionen erstellen, aber auch Text in neue und aufregende Animationserlebnisse verwandeln.

Beispielanimation für Protonen

Sehen Sie sich den Stift my-emitter von matsu7089 (@matsu7089) auf CodePen an.

Zusätzliche Ressourcen für Protonen

• Beispiele für Protonentriebwerke
• Reaktionskomponente für Partikelhintergründe

Zusammenfassung

Das Schöne an vielen dieser Bibliotheken ist, dass es sie schon eine Weile gibt. Daher ist es relativ einfach, Beispiele, aber auch ausführliche Anleitungen zur Verwendung einer bestimmten Bibliothek in einem bestimmten Kontext zu finden.

Vor allem ist es hilfreich zu wissen, welches Ziel Sie erreichen möchten, insbesondere wenn Sie an Animationen arbeiten, die Echtzeitdaten oder benutzerbasierte Eingaben implementieren.

Mit anderen Worten, es gibt kein Bestes . Jede Bibliothek hat ihre eigenen Stärken und Schwächen. Für mich würde ich mich wahrscheinlich für GSAP entscheiden, weil es für den Einsatz in fast jedem erdenklichen Front-End-Projekt gut optimiert ist.

Aber wenn ich ein weniger ehrgeiziges Projekt durchführe, ist eine Bibliothek wie Popmotion ausreichend.