Februar 2021

Animations­techniken im Vergleich

Vektoranimationen leichtgewichtig, skalierbar und interaktiv in die eigene Webseite oder App integrieren? Das geht auf verschiedenen Wegen – wie unsere Übersicht zeigt.

Von Markus Remscheid

Hero-Illustration Animationstechniken

Es gibt viele gute Gründe, warum man Animationen in Webseiten integrieren möchte. Wir haben in der Vergangenheit bereits einige beleuchtet: Animation im UX-Design, Webanimation im B2B, SVG sei Dank: mehr Schub für die Teasergestaltung.

Techniken um Webanimationen zu realisieren, gibt es mindestens genauso viele. Deshalb hat unsere Übersicht auch keinen Anspruch auf Vollständigkeit.

Vielmehr konzentrieren wir uns hier auf Methoden, die es erlauben, grafische Vektoranimationen in Webseiten oder Apps zu integrieren. Und das möglichst leichtgewichtig und interaktiv. Vektoranimationen können nämlich besonders praktische Helfer im UX-Design sein.

Z. B. lassen sich so Interface-Elemente wie Burger-Menüs, Bewertungssterne oder Ladebalken lebhaft animieren. Vorstellbar sind auch dynamische Infografiken wie Balkendiagramme, die zwischen Zuständen dynamisch wechseln und so Veränderungen anschaulich visualisieren. Oder Vektor­animationen werden genutzt, um Illustrationen Leben einzuhauchen. Z. B. über eine Scroll-Steuerung.

Im Hinblick auf diese Anforderungen stellen wir im Folgenden verschiedene Techniken für die Realisierung vor. Und das mit unserem (subjektiven) Blick auf deren Vor- und Nachteile.

1. Gif-Animation:

Beispiel Gif-Animation
GIF-Animationen gibt es schon seit den Anfangstagen des World Wide Web und sind bis heute sehr beliebt. Ohne jegliche Programmier­kenntnisse lassen sich GIF-Animationen in Bildbearbeitungs­programmen wie z. B. Photoshop erstellen und exportieren. Die Einbindung in Webseiten ist problemlos und erfolgt wie bei JPGs oder anderen Bildformaten auch.
Giphy bietet GIF-Animationen zu verschiedensten Themen zum Download an. Auch lassen sich dort eigene Animationen erstellen und exportieren.

Vorteile:

  • Einfach in Bildbearbeitungs­programmen umsetzbar
  • Problemlose Einbindung in Webseiten

Nachteile:

  • Nicht für weiche Übergänge und längere Animationen geeignet
  • Dateigrößen wachsen rasch mit Länge der Animation an
  • Nicht responsiv und skalierbar, da pixelbasiert
  • Nicht für interaktive Einbindung gedacht

Geeignet für:

  • Schnelles und unkompliziertes Veröffentlichen kleinerer Animationen mit wenigen Einzelbildern

2. SVG-Animation mit CSS und Javascript

Beispiel SVG-Animation
SVG ist ein Vektorformat, das seit 2011 von allen großen Browsern unterstützt wird. Vielen ist das SVG-Format geläufig, um z. B. Icons oder Logos in Webseiten einzubinden. Die SVG-Grafiken können mit Grafik­programmen wie Adobe Illustrator erstellt werden. Mit Programmier­kenntnissen in CSS lassen sich die Grafiken stylen und animieren. Und mit Javascript lassen sich SVGs auch interaktiv einbinden. Mehr zu SVGs und wie man sie animieren kann: SVG sei Dank: mehr Schub für die Teasergestaltung 

Vorteile:

  • Kleine Dateigrößen
  • Skalierbar und responsiv
  • Indexierbarer Text
  • Lesbar von Screenreadern
  • Interaktionen mit Inline-CSS/Javascript realsierbar

Nachteile:

  • Programmierkenntnisse erforderlich
  • Organische Animationen, wie gehende Figuren schwer umsetzbar
  • SVG-Format wird nicht von allen CMS-Systemen default-mäßig unterstützt

Geeignet für:

  • UX Animationen, kleine illustrative Animationen, Icon- und Logoanimationen, Teaser-Gestaltung

3. SVG-Animation mit GreenSock

See the Pen MonsterMorph by H2D2 (@H2D2) on CodePen.light

Die Morph-Effekte von GreenSock funktionieren auch zwischen Objekten mit unterschiedlicher Zahl von Ankerpunkten.

GreenSock ist eine Animations-Library, die bereits seit über 10 Jahren weiterentwickelt wird. Wer mit CSS vertraut ist und vielleicht noch auf Grundkenntnisse in Javascript bauen kann, wird einen schnellen Einstieg in GreenSock finden. Mit GreenSock sind dank umfangreicher Zeitleisten­funktionen und Easing- und Morph-Effekte auch komplexe Animationen möglich. Eine Einführung zu GreenSock gibt es z. B. auf youTube: GSAP 3.0 Crash Course – JavaScript Animation Library

Vorteile:

  • Kleine Dateigrößen
  • Skalierbar und responsiv
  • Komplexe Morpheffekte
  • Viele dynamische Be- und Entschleunigskurven
  • Interaktionen einfach umsetzbar

Nachteile:

  • Programmierkenntnisse erforderlich
  • Organische Animationen, wie gehende Figuren schwer umsetzbar

Geeignet für:

  • Programmierer oder scriptaffine Designer, die komplexere illustrative Animationen mit oder ohne User-Interaktion erstellen möchten. Für Infografiken, Datenvisualisierung und illustrative Animationen

4. SVG-Animation mit SMIL

See the Pen SMIL Animation by H2D2 (@H2D2) on CodePen.light

Mit SMIL lassen sich User-Interaktionen ganz ohne Javascript umsetzen. Allerdings schwindet die Browser­unterstützung. Und für Microsofts Browser IE und Edge existierte diese noch nie.

SMIL ist die native Animations­sprache von SVG. Morph-Effekte und Interaktionen lassen sich direkt im SVG-DOM realisieren. Bevor man sich aber zu sehr über die Möglichkeiten freut, sollte man beachten, dass die Browser­unterstützung von SMIL schwindet. Sarah Drasner, Autorin von SVG Animations, empfiehlt deshalb, auf alternative Techniken zu setzen. SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features

Vorteile:

  • Kleine Dateigrößen
  • Skalierbar und responsiv
  • Morpheffekte
  • Bewegung entlang eines Pfades
  • Eventsteuerung mit hover oder click

Nachteile:

  • Geringe Browserunterstützung

Geeignet für:

  • Der Einsatz wird nicht empfohlen. Eine Alternative ist z. B. die Verwendung von GreenSock

5. Webanimation mit Adobe Animate

Klicken Sie auf den unteren Button, um den Inhalt von zu laden.

Inhalt laden

Animate ist das Vektoranimations­programm von Adobe und der Nachfolger von Adobe Flash. Die Bedienung und Funktionsweise ist weitgehend gleich geblieben. Der primäre Unterschied liegt in der Formatausgabe. Statt SWF-Dateien werden HTML5/Canvas-Formate exportiert.
Obwohl Canvas kein direktes Rendering von Vektorgrafiken unterstützt, sehen die Animationen scharf aus. Auch bei hochauf­lösenden Displays werden die Animationen sauber dargestellt. Dennoch würden wir uns ein Rendering im SVG-Format wünschen.
Animate bietet vielfältige Animationsmöglichkeiten. Dennoch lassen sich keine direkten Änderungen an Bezierkurven animieren. Natürliche Bewegungsabläufe sind so nur schwer umsetzbar.

Vorteile:

  • Wer noch Adobe Flash kennt, kommt auch mit Adobe Animate zurecht
  • Kleine Dateigrößen
  • Komplexe (Erklär-) Filme realisierbar

Nachteile:

  • Ausgabe im HTML-Canvas-Format
  • Organische Animationen wie gehende Figuren schwer umsetzbar

Geeignet für:

  • Erklärfilme, illustrative Animationen, Infografiken

6. Webanimation mit AfterEffects und Bodymovin/Lottie

AfterEffects erlaubt auch die organische Animation von Vektorgrafiken, wie das Beispiel zeigt. Ein großer Vorteil gegenüber den anderen Techniken.

AfterEffects ist das Animations­programm von Adobe und erinnert stark an Photoshop. Hinzu kommt allerdings die Zeitleiste, über die nahezu alle Parameter und Details des Ausgangsmaterials animiert werden können. Da AfterEffects auch die direkte Animation von Bezierkurven erlaubt, lassen sich auch natürliche Bewegungsabläufe bei Vektoranimationen erzielen.
Ursprünglich gedacht ist AfterEffects für die Erstellung effektlastiger Clips, wie Vorspanne, Werbefilme oder Trailer. Entsprechend liegt der Fokus auf der Ausgabe von Videoformaten. Doch mit Hilfe des AfterEffects-PlugIns Bodymovin ist der Export von Vektoranimationen im JSON-Format möglich. Per Javascript-Library Lottie lassen sich die Animationen in Webseiten oder Apps einbinden. Lottie interpretiert das JSON-Format und gibt es als SVG-Animation aus. Per Javascript kann die Animationswiedergabe beispielsweise per scrollen oder per Klick ausgelöst werden. Alternativ kann auch LottieFiles verwendet werden, um JSON-Animationen ohne Programmierkenntnisse interaktiv einzubinden.

Vorteile:

  • Kleine Dateigrößen
  • Skalierbar und responsiv
  • Organische Animationen umsetzbar, wie gehende Figuren
  • Komplexere (Erklär-) Filme realisierbar
  • Interaktiv steuerbar

Nachteile:

  • Einarbeitungszeit in Adobe AfterEffects
  • Keine „echten“ 3D-Animationen umsetzbar

Geeignet für:

  • Erklärfilme, Infografiken, Icon- und Logoanimationen, UX Animation, illustrative Animationen mit oder ohne User Interaktion

7. 3-D-Webanimation mit Three.js und WebGL

See the Pen Three.JS & WebGL by Johannes Reinhart (@johannes_reinhart) on CodePen.light

WebGL ist eine Programmierschnittstelle, die eine Darstellung animierter 3-D-Grafiken im Webbrowser ermöglicht. Allerdings ist die native Programmierung in WebGL sehr komplex und erfordert Kenntnisse in höheren Programmiersprachen. Leichter wird die Integration, wenn die 3-D-Javascript-Library Three.js hinzugezogen wird. WebGL und Three.js werden deshalb oft in einem Atemzug genannt. Einfache Grafiken oder Animationen können direkt in Three.js programmiert werden. Komplexere Grafiken lassen sich am Besten in einem 3-D-Programm erstellen und im nächsten Schritt mit Three.js einbinden und animieren.

Vorteile:

  • Animationen mit WOW-Effekt
  • Ermöglicht neue Web-Erlebnisse und Simulationen
  • Interaktiv steuerbar

Nachteile:

  • Native Programmierung in WebGL schwer
  • Bedingt skalierbar und responsiv

Geeignet für:

  • 3-D-Grafiken und Animationen mit oder ohne User Interaktion für die Darstellung im Webbrowser optimiert

Fazit:

Eine Erkenntnis konnten wir während unserer Suche nach der idealen Animationstechnik gewinnen: Die eine einzig wahre Lösung gibt es nicht. Jede Technologie hat ihre Berechtigung und kann je nach Anforderung und persönlichen Vorlieben die Passende sein.

Wer es minimalistisch mag, kann mit SVG-Grafiken plus handgescriptetem CSS spannende, kleinere Animationen realisieren. Auch Typo-Animationen sind möglich, da alle typografischen Parameter wie Schriftgrößen, Laufweiten und Zeilenabstände per Keyframe-Animation verändert werden können. Was man damit anstellen kann, haben wir einmal auf codepen demonstriert.

„Die einzig wahre Animations­technik gibt es nicht.“

Die Kombination aus SVG und der Javascript-Bibliothek GreenSock ermöglicht komplexe Morpheffekte. Auch die Bewegungssteuerung entlang an Pfaden und Interaktion ist möglich. Da die Animationen per Code erzeugt werden, ist GreenSock mehr etwas für Programmierer oder Designer mit Spaß am Scripten.

Adobe Animate ist das vertraute Vektoranimationsprogramm für alle, die noch mit Adobe Flash gearbeitet haben. Animate birgt aber einige Limitierungen – sowohl in der Animationserstellung, als auch bei den Ausgabeformaten.

Adobe AfterEffects in Kombination mit Bodymovin/Lottie ist für uns aktuell die favorisierte Option. Der große Vorteil: auch natürliche und organische Bewegungsabläufe lassen sich in Vektorqualität bei kleinen Dateigrößen realisieren. Dazu ist eine interaktive Steuerung mit Hilfe von Lottie oder LottieFiles komfortabel umsetzbar. Wie genau sich AfterEffects-Animationen exportieren und interaktiv integrieren lassen, ist dann Thema für einen nächsten Blogpost.

Möchte man 3-D-Animationen performant und interaktiv einbinden, führt aktuell kein Weg an WebGL vorbei. In Kombination mit Three.js eröffnen sich so ganz neue Darstellungsmöglichkeiten für neuartige, aufregende Web-Erlebnisse.

Haben Sie eine Frage zum Thema oder Sie möchten Webanimationen erstellen lassen?
Wir beraten Sie sehr gerne – kostenlos und unverbindlich.

Zum Beratungsgespräch

Passend zum Thema: