Animation ist die Geheimwaffe eines guten Webdesigners. Animieren bedeutet, zum Leben zu erwecken, und ein paar kleine animierte Details können selbst den langweiligsten Inhalt zum Leben erwecken.
Das Erstellen einer Website oder Seite mit Animationen muss nicht bedeuten, dass das Ganze in einer großen, komplizierten Animations-App oder einem Framework erstellt wird. Sogar etwas so Einfaches wie das Animieren eines Link-Hover-Effekts mit CSS sorgt für ein wenig visuellen Schwung.
CSS-Übergänge und -Transformationen können kombiniert werden, um fantastische Effekte zu erzielen, darunter Bildschirmwischtücher im Star-Wars-Stil. Für mehr Flexibilität und Kontrolle müssen Sie jedoch möglicherweise die Verwendung von JavaScript in Betracht ziehen.
Für einen Designer, insbesondere für einen, der nicht viel programmiert, kann diese Idee etwas abstoßend wirken. Hilfreicherweise gibt es jedoch eine Reihe von JavaScript-Bibliotheken, die speziell für die Erstellung animierter Effekte entwickelt wurden. Sie müssen sich ein wenig mit dem Code befassen, aber der Sinn dieser Bibliotheken besteht darin, dass jemand bereits die meiste schwere Arbeit für Sie erledigt hat. Wenn Sie einfachen Anweisungen folgen können, können Sie JavaScript-Bibliotheken verwenden, um Ihre Designs zu verbessern.
Bevor Sie mit der Suche nach einer Bibliothek beginnen, sollten Sie sich darüber im Klaren sein, wonach Sie suchen. Überlegen Sie, welche Animationseffekte Sie wünschen, und zerlegen Sie sie dann in ihre Bestandteile. Alle einfachen Animationen gliedern sich in Einblenden, Gleiten, Skalieren oder Drehen, gesteuert durch Timer, die Verzögerungen, Beschleunigung und Abspielreihenfolge verwalten, sowie Auslöser (Ereignisse) – wie Scrollen, Tippen oder Laden von Seiten – die die Animation starten und stoppen läuft. Je mehr dieser Funktionen Sie kombinieren, desto komplexer wird die Animation.
Nachdem wir das nun geklärt haben, werfen wir einen Blick auf einige Bibliotheken, angefangen bei den einfachsten bis hin zu den anspruchsvolleren (aber immer noch überschaubaren) Angeboten.
AniJS
Wenn Sie neu in der Animation oder in JavaScript sind, AniJS ist ein toller Ausgangspunkt. Es handelt sich um eine UI-Interaktionsbibliothek, die es Ihnen ermöglicht, JavaScript zur Steuerung von CSS-Animationen zu verwenden, ohne JavaScript schreiben zu müssen. Es verwandelt JavaScript in „einfache“ Sprache – if: event, do: action, to: element. Da dies auch die grundlegende Syntax von JavaScript nachahmt, kann es einem Nicht-Programmierer helfen, sich mit JS vertraut zu machen. Wenn Sie möchten, können Sie damit auch weitergehende Fortschritte erzielen.
Es gibt viele Demos und Beispiele und es gibt eine Ressourcenseite – die AniCollection – das eine Menge vorgefertigter Animationen enthält, die Sie herunterladen und verwenden können.
Wenn Sie die Vorteile von JavaScript nutzen möchten, sich aber nicht bereit fühlen, sich mit den unten aufgeführten Ressourcen zu befassen, ist AniJS genau das Richtige für Sie.
Mikrobibliotheken
Eine andere Möglichkeit, mit Animationen zu beginnen, besteht darin, eine Bibliothek auszuprobieren, die sich auf eine Sache konzentriert. Diese Mikrobibliotheken haben den Vorteil, dass sie klein sind, und da sie in ihrer Funktionalität eingeschränkt sind, sind sie in der Regel leicht zu implementieren. Hier sind einige Vorschläge, die Sie ausprobieren können:
ScrollReveal
ScrollReveal macht so ziemlich das, was der Name verspricht: Elemente werden animiert, wenn sie im Ansichtsfenster erscheinen oder es verlassen. Dies ist ein beliebter Effekt, der den Benutzer erfreuen und gleichzeitig subtil sein kann.
Ein möglicher Nachteil besteht darin, dass Sie es in den Kopf des Dokuments laden müssen, um ein „Flimmern“ des Inhalts zu vermeiden. Dies wird in der Dokumentation behandelt.
AOS
AOS steht für „Animate on Scroll“ und dient – ja, Sie haben es erraten – der Animation gezielter Elemente, während der Benutzer scrollt. Dieser beliebte Effekt kann eine praktische Funktion haben und visuelles Interesse wecken.
Granim.js
Granim.js ermöglicht die Animation von Farbverläufen. Sie können Farben, Richtung und Mischmodi steuern und mit Bildmasken verwenden. Dies scheint zunächst rein dekorativ zu sein, Sie können es jedoch auf Benutzerinteraktionen wie Mausereignisse anwenden.
Tippe es
Tippe es Erstellt Animationen im Schreibmaschineneffekt. Dies ist ein Effekt, den wir auf Portfolio-Websites ziemlich häufig beobachten. Es trägt zur Einbindung des Benutzers bei und kann bei der Inhaltshierarchie helfen, indem es die Aufmerksamkeit auf den animierten Text lenkt.
Vivus
Vivus animiert SVGs und lässt sie so aussehen, als würden sie gezeichnet. Es ist vielleicht etwas komplizierter, damit klarzukommen, aber die Ergebnisse sind ziemlich gut.
Grobe Notation
Grobe Notation Fügt animierte Textanmerkungen und Dekorationen hinzu. Sie können handgezeichnete Klammern, Durchstreichungen, Unterstreichungen, Hervorhebungen, Durchstreichungseffekte und Kreise hinzufügen. Sie können auch verschiedene Effekte kombinieren.
barba.js
barba.js animiert Übergänge zwischen Seiten und vermittelt so den Eindruck einer einseitigen Anwendung. Seien Sie gewarnt, die Dokumentation setzt Vertrautheit mit der JS-Syntax voraus und empfiehlt Ihnen, sicherzustellen, dass Sie damit vertraut sind, bevor Sie versuchen, sie zu verwenden.
TweenJS
TweenJS ist eine Tweening-Bibliothek, die das Tweening sowohl numerischer Objekteigenschaften als auch CSS-Stileigenschaften unterstützt. Befehle können miteinander verkettet werden, um komplexe Tweens zu erstellen.
Es ist durchaus möglich, zwei oder mehr Mikrobibliotheken gleichzeitig zu nutzen. Sie sollten einen Namensraum haben, damit sie nicht miteinander in Konflikt geraten. Wenn Sie zwei oder mehr Bibliotheken auf derselben Webseite verwenden möchten, sollten Sie das gesamte JavaScript verketten – das heißt, so viel Code wie möglich in derselben Datei ablegen, sodass es sich nur um eine Serveranfrage handelt.
Größere Bibliotheken
Wenn Sie feststellen, dass Sie mehr als 4 oder 5 Mikrobibliotheken gleichzeitig verwenden müssen, ist es möglicherweise an der Zeit, sich eine etwas umfangreichere Bibliothek oder sogar ein ganzes Framework anzusehen, das alles, was Sie tun möchten, selbst bewältigen kann.
Seien Sie darauf vorbereitet, dass die Dinge jetzt etwas komplizierter werden, aber diese Animationsbibliotheken verfügen in der Regel über eine gute Dokumentation und Community-Unterstützung.
GSAP
GSAP, auch bekannt als GreenSock, ist eine der beliebtesten JavaScript-Bibliotheken für Animationen. Es kann fast alles animieren, auf das JavaScript zugreifen kann, einschließlich CSS-Eigenschaften und -Variablen, benutzerdefinierten Objekteigenschaften, SVG, komplexen Zeichenfolgen und React-Komponenten.
Es ist modular aufgebaut und verwendet Plugins, um dem Kern optionale Funktionen hinzuzufügen. Das bedeutet, dass Sie nur das hinzufügen, was Sie tatsächlich benötigen, ohne dass am Ende überflüssiger Code entsteht. Aufgrund seiner Leistung ist es sehr schnell, robust und leicht.
Für jeden, der mit JavaScript nicht vertraut ist, mag es ein wenig einschüchternd klingen, aber die Dokumentation ist unkompliziert und umfassend und der Support ist gut.
Anime.js
Eine weitere sehr beliebte Animationsbibliothek ist Anime.js. Es kann auf CSS-Eigenschaften, SVG, DOM-Attribute und JavaScript-Objekte abzielen. Es verfügt über ein integriertes Staffelungssystem, das das Überlappen von Animationen erleichtert, und über hervorragende Zeitsteuerung.
Auch hier mag es etwas kompliziert erscheinen, aber die Dokumentation ist sehr gut gemacht, mit klaren Demos neben jedem behandelten Punkt.
Popmotion
Popmotion ist in Typescript geschrieben, ist aber in jede JavaScript-Umgebung portierbar. Es ist leistungsstark und unterstützt Keyframe- und Federanimationen für Zahlen, Farben und komplexe Zeichenfolgen. Gleichzeitig ist es winzig und alle seine Funktionen sind einzeln importierbar, sodass kein unnötiger Code erforderlich ist.
mo.js
Mo.js verfügt über eine deklarative API, die das Erstellen benutzerdefinierter Bewegungsgrafiken erleichtert. Es ist modular aufgebaut und verfügt über integrierte Komponenten, die Sie als Ausgangspunkt verwenden können. Besonders reizvoll ist das Burst-Modul.
So animieren Sie Webseiten
Webanimationen lassen sich in der Regel in zwei Hauptkategorien einteilen:
- Nebenbei: wo Animationen abgespielt werden, unabhängig davon, was der Benutzer tut. Beiläufige Animationen sind nicht unbedingt nur Dekorationen; Dabei kann es sich um Diashows oder Demos handeln.
- Interaktiv: die durch Ereignisse wie Schweben, Scrollen und Tippen verursacht werden. Diese können genutzt werden, um Benutzer anzuleiten und sie zu Aktionen zu ermutigen.
Wenn Animationen ein integraler Bestandteil der Benutzeroberfläche sind und durch Benutzerinteraktionsereignisse ausgelöst werden, können sie die Benutzerinteraktion verbessern, da der Benutzer das Gefühl hat, die Kontrolle über das Geschehen auf dem Bildschirm zu haben.
Nutzen Sie sie, um das Design zu verstärken, die Benutzer zu ermutigen und zu beruhigen und sie bei Bedarf zu erfreuen.
Wenn Animationen gut eingesetzt werden, verleihen sie einem Design eine zusätzliche Dimension. Sie sollten sie jedoch nicht dazu verwenden, ein schlechtes UI-Design auszugleichen. Wenn Sie sich ausschließlich auf Animationen verlassen, damit ein Design funktioniert, müssen Sie das Design überdenken.
Animation sollte immer nur eine ästhetische und funktionale Verbesserung sein. Sie sollten sicherstellen, dass Ihre Website auch dann noch funktioniert, wenn die Animationen fehlschlagen. Wenn Ihr JavaScript aus irgendeinem Grund nicht geladen oder nicht ausgeführt werden kann, sollte der Benutzer den Inhalt trotzdem sehen und Aktionen ausführen können.
In den allermeisten Fällen ist weniger definitiv mehr. Den Benutzer mit zu viel Bewegung zu bombardieren, kann irritierend sein. Außerdem sollten Sie darauf achten, dass Ihre Animationen konsistent und ästhetisch stimmig sind.
Auf der technischen Seite ist die Leistung von größter Bedeutung, sowohl im Hinblick auf die Animation selbst als auch auf die Seite insgesamt. Sie möchten die Dinge so leicht wie möglich halten. Wenn Sie etwas Einfaches tun, könnten Sie darüber nachdenken, es in Vanilla-JavaScript zu schreiben (ohne Abhängigkeiten), da dies die einfachste Option ist. Wenn Sie jedoch keine JavaScript-Kenntnisse haben, lohnt sich die eingesparte Dateigröße nicht im Vergleich zu dem, was Sie durch die Verwendung einer Mikrobibliothek an Zeit und Energie sparen würden.
Es gibt ein paar Dinge, die es zu beachten gilt, wenn es um JavaScript-Dateien und Größenprobleme geht. Diese gelten allgemein für JavaScript, nicht nur für Animationen oder Bibliotheken.
Mikrobibliotheken haben in der Regel eine Gzip-Größe von etwa 5 bis 7 KB, aber selbst die umfangreicheren Bibliotheken, die wir uns hier angesehen haben, haben eine Gzip-Größe von weniger als 30 KB. Wenn man das mit der Größe der Bilddateien vergleicht, ist das ziemlich vernachlässigbar. Selbst im Vergleich zu CSS-Dateien ist es nicht gerade riesig.
JavaScript wird normalerweise als progressive Erweiterung am Ende des Dokuments geladen. Das bedeutet, dass es zuletzt geladen wird und den Rest des Seitenladens nicht blockiert, im Gegensatz zu CSS, das im Kopf geladen wird.
Wir haben es bereits erwähnt, aber es lohnt sich noch einmal: Laden Sie so wenige externe Dateien wie möglich. Wenn Sie mehr als eine Mikrobibliothek verwenden, verketten Sie diese. Je weniger Aufrufe an den Server erfolgen, desto schneller ist die Ladezeit.
Eine der größeren Bibliotheken, die wir uns hier angesehen haben, GreenSock, enthält zusätzlichen Code, um sicherzustellen, dass die Animationen reibungslos funktionieren. Ein paar zusätzliche Millisekunden beim ersten Laden zahlen sich also aus, damit Benutzer nicht durch schlechte Leistung auf der Seite selbst abgelenkt werden.
Wenn Sie Probleme mit den Ladezeiten haben, schauen Sie sich zuerst Ihre Bilddateien an: Durch die Optimierung von Bildern sparen Sie wahrscheinlich viel mehr, als wenn Sie etwas JavaScript weglassen. Stellen Sie außerdem sicher, dass Ihre CSS-Dateien so leicht wie möglich sind. Nutzen Sie den Browser-Cache optimal aus. Sobald eine Datei geladen ist, ist sie auf Ihrer gesamten Website verfügbar. Und beschränken Sie die Anrufe an den Server auf ein Minimum. Für maximale Ladegeschwindigkeit verwenden Sie ein CDN für Ihre externen Ressourcen.
Größe ist nicht dasselbe wie Blähungen – Blähungen sind etwas, das man nicht braucht.
Die Größe ist wichtig, aber die Eliminierung von redundantem Code ist möglicherweise noch wichtiger.
Sie sollten immer die kleinstmögliche Bibliothek verwenden, um ungenutzten Code zu entfernen, nicht zuletzt, weil Google ungenutzten Code zur Kenntnis nimmt. Es könnte gegen Sie sprechen. Viele dieser Bibliotheken sind modular aufgebaut und ermöglichen es Ihnen, nur das zu laden, was Sie tatsächlich benötigen.
Diese Tools sind nicht nur für Nicht-Programmierer gedacht. Auch für Frontend-Entwickler sind sie eine große Zeitersparnis.
Wenn Sie regelmäßig Animationen in Ihren Designs verwenden möchten, müssen Sie sich mit JavaScript vertraut machen. Sie müssen kein Experte sein, sollten aber verstehen, wie es funktioniert. Außerdem schadet es nicht, ein grundlegendes Verständnis dafür zu haben, was unter der Haube vor sich geht.
