Wie Designer Web-Animationen ganz ohne Code erstellen können
Es heißt, Designer seien von Natur aus faul. Sie wollen Websites gestalten, ohne zu coden, Illustrationen erstellen, ohne Papier zu benutzen, und Web-Animationen bauen, ohne an die technische Umsetzung zu denken. Zum Glück gibt es für all das (mehr oder minder) gute Softwarelösungen. Im Fall von Animationen tauchen immer wieder neue Tools auf, die einfache Bedienung, schnelle Implementierung und hohe Kompatibilität versprechen. Allerdings gibt es dabei einen Haken: Den Umgang mit neuen Tools muss man zuerst lernen und testen – das kostet viel Zeit. Außerdem setzen viele Anbieter einen bestimmten Grad an Coding-Know-how voraus, was Designer schnell frustrieren kann. Und nicht nur das: Unterstützt das Programm bestimmte Effekte oder andere Anforderungen nicht, war der ganze Aufwand für die Katz. Hier kommt Lottie ins Spiel.
Animieren mit Lottie
Lottie bietet eine kostenlose Bibliothek für Web, iOS, Android, React und weitere Plattformen, die JSON-basierte Animationen analysiert und nativ im Web rendert. Das aus der Feder von Airbnb stammende Tool ist seit 2017 auf dem Markt und mit der Zeit ganz schön gewachsen. Seit der Veröffentlichung sind ein After-Effects-Plugin, ein Webplayer, ein Webeditor und die Unterstützung von weiteren Tools wie Figma, Flow und Framer dazugekommen. Und nicht zuletzt steht hinter Lottiefiles eine ganze Community von Designern, die ihre Kunstwerke zeigen und sich untereinander austauschen.
Dabei spielt die Animationsbibliothek regelmäßig ihre Vorteile gegenüber den Mitspielern aus. Zum einen werden die Animationen in Adobe After Effects gebaut: ein Videoeffektprogramm, das die meisten Designer zumindest grundlegend kennen. Mithilfe des neuen Lottie-Plugins können vektorbasierte After-Effects-Dateien verlustfrei als JSON-Dateien exportiert werden. Und das, ohne ein zusätzliches Programm lernen und ohne Code schreiben zu müssen. Lottie spart Designern aber nicht nur Zeit und Nerven, sondern begeistert auch Entwickler, die mit dem Lottie-Web-Player den performanten Code einfach implementieren können. Ein Gewinn für beide Seiten. Und auch im Vergleich zu anderen Methoden, Animation ins Web zu bringen, stehen Lottie-Dateien sehr gut da: Im Gegensatz zu GIFs oder PNG-Animationen lassen sie sich verlustfrei skalieren und sind dennoch überaus kompakt, weshalb es auch bei komplexeren Grafiken nicht zu Performance-Problemen kommt. Außerdem muss im Gegensatz zu CSS-Animationen keine Zeile Code geschrieben werden.
Gute Gründe dafür, Lottie einmal genauer unter die Lupe zu nehmen. In unserem Beispiel wurde eine simple Animation einer Katzenuhr umgesetzt. Die Pupillen, der Katzenschweif und die Uhrzeiger sollen sich in einer Schleife bewegen – ganz easy, ohne viel Schnickschnack.
Schritt 1: Vorbereitung mit Adobe Illustrator
Um eine saubere Animation zu erstellen, ist eine gute Vor- und Aufbereitung der Illustration das A und O. Es ist von Vorteil, sich bereits im Vorfeld einen groben Ablaufplan für die Animation zu überlegen, damit die Illustration entsprechend aufbereitet werden kann. Die Grafik selbst legt man am besten als Adobe-Illustrator-Datei an, damit sie sich später einfach in After Effects importieren und in Vektoren umwandeln lässt. Wichtig ist dabei, dass alle einzelnen Elemente, die später animiert werden sollen, auf separaten Ebenen liegen. Auch wenn das die Illustrator-Datei sehr aufbläht, hilft es beim späteren Animieren enorm. Im Beispiel werden lediglich die Pupillen, der Schweif und die Uhrzeiger animiert, deshalb liegen diese Elemente als einzelne Ebenen in der Datei. Alle Ebenen sollten sauber aufgeräumt und alle unnötigen Pfade entfernt sein, um eventuell auftretenden Fehlerquellen vorzubeugen. Auch sollten alle Ebenen schon jetzt eindeutig benannt sein, da die Bezeichnungen mit in After Effects importiert werden.
Ist die Illustration sauber aufgeräumt, geht es in After Effects weiter. Als Kompositionseinstellung hat sich eine Framerate von 60 fps bewährt, während das Dateiformat flexibel je nach Grafikformat gewählt werden kann. Mit diesen Grundeinstellungen kann die Illustrator-Datei importiert werden. Das ist leider ein mühsamer Schritt, da alle Illustrator-Ebenen einzeln eingefügt werden müssen. Etwas einfacher geht es, wenn man „Ablage > Importieren > Mehrere Dateien“ auswählt. Dadurch wird immer wieder ein neues „Importieren“-Modul aufgerufen und man muss nicht jedes Mal den Weg durch das Menü gehen. In dem Fenster wählt man die erstellte Illustrator-Datei aus und achtet darauf,dass das File als Footage importiert wird. Sobald das erledigt ist, öffnet sich ein zweites Fenster, in dem man eine Illustrator-Ebene auswählt und in die After-Effects-Datei einfügt. Dieser Schritt wird so lange wiederholt, bis alle Ebenen importiert sind.
Wenn diese Fleißarbeit geschafft ist, schiebt man nur noch alle importierten Footage-Dateien per Drag & Drop in die eitleiste. Die Ebenen liegen jetzt wild verstreut auf der gesamten Fläche – das ist allerdings nicht weiter tragisch und wird später wieder angepasst. Zunächst wählt man alle neuen Ebenen an und wandelt sie mit Rechtsklick „Erstellen > Formen aus Vektorebene erstellen“ in Vektoren um. Es kann dann passieren, dass sich die Ebenen ein weiteres Mal erschieben; jetzt sollte man das allerdings korrigieren. Alle Illustrator-Footage-Ebenen können aus der Zeitleiste entfernt werden; im weiteren Verlauf arbeitet man ausschließlich mit den Vektorebenen. Wenn alle Ebenen an der richtigen Position liegen, ist der Grundstein für die Animation gelegt.
Vor der Animation hilft es, kurz das Lottiefiles-Plugin zu checken. Lottie hat in diesem Jahr ein After-Effects-Plugin veröffentlicht, welches das ursprünglich zum Rendern notwendige Plugin Bodymovin ablöst. Neben zahlreichen Vorteilen für das Animieren bringt es eine Vorschau-Ansicht der Lottie-Animation in After Effects mit. Und diese Funktion sollte man am besten so früh wie möglich nutzen, um Fehler zu vermeiden und effektiver arbeiten zu können. Ein häufig auftretender Bug ist beispielsweise, dass importierte Illustratorebenen fehlerhaft interpretiert und somit ein paar Pfade fälschlicherweise doppelt exportiert werden. Das ist schnell behoben, indem man einen Blick auf den Inhalt der Ebene wirft und dort unnötige Pfade löscht. Um das Plugin nutzen zu können, muss man einen kostenlosen Lottiefiles-Account erstellen. Ist das Plugin installiert und hat keinen Fehler in der Komposition aufgedeckt, kann der schöne Part beginnen: die Animation.
Schritt 2: Animation mit Adobe After Effects
Als professionelle Video-Editing-Software bringt After Effects massenhaft Effekte und Einstellungen mit. Diese große Auswahl birgt die Gefahr, sich in komplexen Abläufen zu verlieren. Man legt den Fokus besser auf simple Bewegungen und Effekte und baut sie im nächsten Schritt gegebenenfalls aus. Die Komplexität von After Effects hat allerdings auch ihre Vorteile: Ein einzelner Effekt lässt sich in unterschiedlicher Weise umsetzen. Wenn man beispielsweise eine Kontur animieren will, hat man in After Effects die Wahl. Man kann eine Kontur als Eigenschaft einer Ebene oder als Ebeneneffekt anlegen. Die eine Option wird von Lottie unterstützt, die andere nicht. So oder so lohnt sich ein frühzeitiger Blick in die Supported-Features-Tabelle von Lottie, um eventuell nicht unterstützte Features zu erkennen und anzupassen.
Die unterschiedlichen Ebenen lassen sich nun in After Effects nach Belieben animieren. Hier sind der Kreativität fast keine Grenzen gesetzt: Neben dem Arbeiten mit Unterkompositionen können auch Masken, Schleifen und andere Effekte problemlos eingesetzt werden. Für die Grundlagen der Videogestaltung gibt es zahlreiche Tutorials im Netz, mit denen man sich in After Effects schnell und effektiv einarbeiten kann. Wichtig ist aber vor allem, immer wieder einen Blick in die Plugin-Vorschau zu werfen, da Lottie natürlich nicht jeden Effekt von After Effects unterstützen kann. Inspiration zu möglichen Effekten bietet auch die Lottiefiles-Community, in der viele Designer ihre Animationen als offene After-Effects-Dateien zur Verfügung stellen. Ist man mit der Animation zufrieden, und funktioniert sie auch in der Vorschau reibungslos, gibt es zwei Möglichkeiten zum weiteren Verlauf: Zum einen kann das Plugin die Animation direkt als .lottie-Datei auf den Rechner laden. Man kann sein Werk aber auch in der Lottiefiles-Community hochladen und dort auf weitere Features zugreifen, darunter Hintergründe, Ebenenfarben und Wiedergabegeschwindigkeit. Im neuen Lottie-Editor geht es noch ein wenig mehr in die Tiefe, denn hier lassen sich sogar die Framerate und Farbverläufe ohne eine erneute Bearbeitung in After Effects anpassen.
Schritt 3: Implementierung mit Lottie-Web-Player
Das .lottie-Dateiformat basiert auf JSON und lässt sich somit im Web, iOS, Android und auf anderen Plattformen abbilden. Auch hier gibt es unterschiedliche Wege. Der schnellste Weg, Lottie Animationen zu implementieren, ist der Lottie-Web-Player. Nach Eingabe der URL des Lottiefiles erhält man ein Code-Snippet, das auf der eigenen Website eingebunden werden kann. Diese Methode ist ideal für die Integration in CMS-Systeme, da man hier keine zusätzlichen Dateien auf den Server laden muss: ein Pro-Argument für code-unfähige Designer. Allerdings kann man so nicht auf den Code zugreifen und somit auch keine Interaktionen einfügen. Denn auch das ist mit Lottie gut umsetzbar, wenn die Animation beispielsweise erst während des Scrollens starten oder beim Mouseover von Neuem beginnen soll. In diesen Fällen bietet sich die Einbindung der Lottie-Bibliothek an. Als Open-Source-Code in GitHub hochgeladen, steht sie zum Download zur freien Verfügung. Beispiele für Interaktionsmöglichkeiten gibt es auch auf der Lottiefiles-Website, wo sie sogar designerfreundlich mit Codebeispielen und einer entsprechenden Vorschau aufbereitet sind. Bei mehreren eingebundenen Lottie-Animationen sollte man darauf achten, dass sie erst laden, wenn sie in den Viewport gelangen. Das beschleunigt die Ladegeschwindigkeit der Website und kommt so auch den älteren Browsern entgegen.
Fazit
Animationen auf Websites spielen eine immer größere Rolle im Webdesign, können sie doch einen Webauftritt mit viel Kreativität zum Leben erwecken. Lottie ermöglicht Designern vollen Spielraum in der Animation und die Option, die Ergebnisse mit wenig Aufwand und ganz ohne technische Anpassungen und Coding-Kenntnisse in die Website zu implementieren. Und auch die reibungslose Integration und die gute Performance sind nicht zu toppen. Problematisch bleibt aber, dass After Effects zwar unter Designern bekannt, allerdings für Neulinge kein besonders schnell erlernbares und benutzerfreundliches Tool ist. Außerdem bietet es eine unüberschaubare Masse an Funktionen und Effekten, die für Animationen nicht unbedingt benötigt werden. Um hier gezielter in Richtung Usability zu gehen, lässt sich Lottie bereits jetzt mit anderen Tools wie zum Beispiel Flow oder Haiku koppeln. Und genau darin liegt die Zukunft für Lottie-Animationen. Weil die Lottie-Community sehr aktiv ist, und die jüngste Vergangenheit viele neue Entwicklungen gebracht hat, gibt es Grund zum Optimismus, dass sich bald eine gute Alternative zu After Effects findet. Damit Designer auch in Zukunft getrost die Hände vom Code lassen können – zumindest was Web-Animationen angeht.
Wie Designer Web-Animationen ganz ohne Code erstellen können: Oder, wie es auch kompliziert und und umständlich geht. Ich denke nicht, dass diese Arbeitsweise den Wünschen der DesignerInnen entgegen kommt. – Diese wünschen sich mehr oder weniger eine Alternative für Flash – was ich verstehen kann.
Mein Gott, was ist denn das für ein Unsinn:
„Es heißt, Designer seien von Natur aus faul. Sie wollen Websites gestalten, ohne zu coden, Illustrationen erstellen, ohne Papier zu benutzen, und Web-Animationen bauen, ohne an die technische Umsetzung zu denken.“
Dass heute nach endlos vielen Jahrzehnten die Coderbande noch immer arbeitet, wie zu Beginn der Digitaltechnik und Code von Hand zusammenbastelt, muss man nicht lustig finden.
Dass die das fertig bringen, Anwender dazu zu zwingen, diesen Firlefanz auch noch mit zu machen, zeigt höchstens, dass viele von denen kein wirklich professionelles Verständnis für die Notwendigkeiten ihres Jobs entwickelt haben.
Aus Entwickler-Sicht kann ich sagen: Lottie ist eine sehr hilfreiche Library für Animationen. Damit haben wir bei uns schon öfter gearbeitet und auch die Zuarbeit von den Designern klappt in der Tat reibungslos. Besonders schön ist die Interaktivität, die man ebenfalls damit umsetzen kann, z.B. mit Mouseover etc.
Lottie kann man auf jeden Fall nutzen. Besonders gut, dass man verlustfrei skalieren kann.
Viel zu kompliziert, gerade wenn man kaum in der Materie steckt und sich nicht erstmal mit AE auseinandersetzen will. Jetzt der einfache Weg: Mit Figma (weil flotter / gratis) die Illustration bauen, als SVG exportieren, 1:1 in SVGator (Online-Tool) importieren und animieren. Export als animated .svg (CSS only oder JS) und fertig. Wesentlich einfacher und komplett kostenfrei machbar (SVGator empfiehlt sich allerdings als Premium-Version… immer noch weit günstiger als After Effects).
Probiere ich gleich mal aus. Muss nur etwas Text animieren, über den sich Farbflächen halbtransparent legen sollen…
Das Tool mit am wenigsten Einarbeitung gewinnt.
Ich muss widersprechen: Die Testversion ist derart abgespeckt, dass man sich kein Bild machen kann. Kostenfrei geht anders. Ich packe mir dafür nicht das x-te Abo drauf.
Sehr sehr zeitintensiv, auch wenn man mit AE bewandert ist. Wenn man jedoch Zugang zur Adobe Creative Suite hat würde ich Illustrator absolut empfehlen. Interessanter Workaround von Michael.
Starkes Tutorial. Ich bin auf Lottie durch Avada gestoßen und fand die Beispiele auf Lottie.com mehr als dürftig, da man Online außer Farbe nichts verändern kann. Mal wieder so ein unausgereiftes Tool, das nach Jahren in der Versenkung verschwindet. Dafür aber jede Menge schlecht designter Vorlagen für unnütz Geld, denen man sofort den Coder jenseits ästhetischer Erfahrung ansieht. Dann sehe ich hier diese Anleitung – und bin versöhnt. Danke dafür!
„Alle Illustrator-Footage-Ebenen können aus der Zeitleiste entfernt werden; im weiteren Verlauf arbeitet man ausschließlich mit den Vektorebenen.“Versteht man nicht – geht es auch mit Bild?
Ich habe meine Website von https://www.neckaralb.digital erstellen lassen und die haben mir auch meine Lottie Files erstellt, richtig cool das wertet meine Seite enorm auf.
Frage: Kann ich die Lottie files selbst bearbeiten oder brauch ich die Illustrator Daten ?