SVG-Animationen im Web

Animation und Motion Design auf Websites ist kein neuer Trend. Schon mit Adobe Flash wurden Webseiten animiert. Es gibt unzählige Tools und Bibliotheken die bei der Umsetzung animierter Grafiken unterstützen - die meisten davon arbeiten mit SVG und CSS. Ein wiederkehrendes Problem das sich für uns beim produktiven Einsatz gezeigt hat, war der fehlende Workflow zwischen Grafiker und Entwickler.

Um zu einen für uns gut funktionierenden Workflow zu gelangen benötigten wir einige Schritte die wir im folgenden zeigen möchten.

Logoanimationen als SVG mit JavaScript programmieren

Angefangen hat es mit der Idee das Logo einer Kundenseite zu animieren. Die Animation war großartig und begeisterte alle Beteiligten. Der Nachteil: die Umsetzung erfolgte mit eingebettetem JavaScript und der Bibliothek SVG.js, welches genau auf diese Seite abgestimmt war. Somit konnten wir das fertig animierte Logo nicht einfach in unsere eigene Portfolioseite mit aufnehmen. Diese Art der Umsetzung erschwert auch Änderungswünsche des Designers, die programmatisch umgesetzt werden müssen.

SVG Animationen mit Adobe After Effects und Bodymovin (Lottie)

Adobe After Effects wurde als Kompositions- und Animationstool für Video und Filmaufnahmen entwickelt. Erst mit dem von Airbnb entwickelten Plugin Bodymovin lassen sich erstellte Animationen im dafür vorgesehenen JSON-Lottie-Format als Vektorgrafiken für Websites und Apps exportieren.

Die Animation im Web erfolgt mittels eingebundener JavaScript-Bibliothek. Im Gegensatz zur mit SVG.js implementierten Variante, ist das Lottie-File portabler. Dieser Umstand erweist sich auch im praktischen Einsatz als wesentlich komfortabler - Änderungen lassen sich vom Designer direkt in After Effects umsetzen und müssen anschließend nur noch exportiert und auf den jeweiligen Server übertragen werden.

Leider gab es zum Zeitpunkt unseres Einsatzes auch gravierende Nachteile im Funktionsumfang des Bodymovin-Plugins. Viele der erstellten Animationen konnten nicht eins zu eins exportiert werden. Hier macht sich bemerkbar, dass es sich um ein - dennoch sehr mächtiges - Plugin für eine Anwendung handelt, die nicht für vektorbasierte Webanimationen entwickelt wurde.

SVG Animationen mit Keyshape

Bei der Recherche zu weiteren Alternativen entdeckten wir durch Zufall das nicht sehr bekannte Keyshape für Mac. Im Gegensatz zu Bodymovin werden bei diesem Tool native SVG mit CSS Keyframes generiert. Einfache animierte Vektorgrafiken lassen sich damit ressourcenschonend ohne Notwendigkeit zur Einbindung einer Drittbibliothek erstellen. Mit Keyshape ist sogar der Import von Lottie-Dateien möglich. Die zuvor mit After Effects für Bodymovin erstellten Grafiken können wir damit mit wenig Aufwand wiederverwenden.

Für uns ist es aktuell das Tool der Wahl um Animationen für Logos, Icons oder Illustrationen als SVG zu exportieren und in unseren Web- und Softwareprojekten einzusetzen. Der schlanke Aufbau ermöglicht ein schnelles Einlernen und bietet dennoch alle Funktionen die benötigt werden.