Anzeige
Anzeige
How-To
Artikel merken

Wie Designer Web-Animationen ganz ohne Code erstellen können

Mithilfe von Lottie können Designer vektorbasierte Animationen nicht nur leicht ­erstellen, ­sondern auch schnell in die Website integrieren. Und das, ganz ohne ein neues Tool ­lernen zu müssen.

Von Victoria Rauch
8 Min. Lesezeit
Anzeige
Anzeige

Animieren mit Lottie. (Foto: Shutterstock / shurkin_son)

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 tech­nische 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

Anzeige
Anzeige

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 Vor­teile gegenüber den Mitspielern aus. Zum einen werden die Anima­tionen in Adobe After Effects gebaut: ein Videoeffekt­programm, das die meisten Designer zumindest grundlegend kennen. Mit­hilfe des neuen Lottie-Plugins können vektor­basierte 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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

Die Vorbereitung der Animation in Illustrator ist oft mühselig und zeitaufwendig, allerdings lohnt sich die Arbeit enorm. Eine klare Strukturierung der Ebenen ist ebenso wichtig wie eine eindeutige Benennung. (Abbildung: Victoria Rauch / Adobe)

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 un­nö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 Grafik­format 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.

Anzeige
Anzeige

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 Vektor­ebene 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 beispiels­weise, 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 Lottie­files-Account erstellen. Ist das Plugin installiert und hat keinen Fehler in der Komposition aufgedeckt, kann der schöne Part beginnen: die Animation.

Beim Animieren sollte man lieber klein anfangen und sich auf simple Abläufe fokussieren. In diesem Beispiel sollen sich lediglich die Augen, die Uhrzeiger und der Katzenschweif bewegen. Tipp: Durch die Einstellung „Easy Ease“ im Keyframe-Assistenten wirken die Bewegungen natürlicher und flüssiger. (Abbildung: Victoria Rauch / Adobe)

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.

Anzeige
Anzeige

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 Anima­tionen 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 Frame­rate und Farbverläufe ohne eine erneute Bearbeitung in After Effects anpassen.

Lottie bietet viele Möglichkeiten, die hochgeladene Animation im Nachhinein anzupassen, beispielsweise das Ändern der Hintergrundfarbe. Zur Implementierung ist der Lottie-Web-Player am schnellsten: Einfach Code-Snippet kopieren, auf der Website einfügen, fertig. (Abbildung: Victoria Rauch / Lottie)

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 Krea­tivitä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-Anima­tionen. 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-Anima­tionen angeht.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
11 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

klxm

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.

Antworten
Kantenhuber

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 tech­nische 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.

Antworten
Felix

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.

Antworten
Franz

Lottie kann man auf jeden Fall nutzen. Besonders gut, dass man verlustfrei skalieren kann.

Antworten
Michael

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).

Antworten
Ralph

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.

Antworten
Ralph

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.

Antworten
Pascal

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.

Antworten
Ralph

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!

Antworten
Radu

„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?

Antworten
Alex

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 ?

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige