How-To

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

Animieren mit Lottie. (Foto: Shutterstock / shurkin_son)

Lesezeit: 7 Min.
Artikel merken

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.

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

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.

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.

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

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.

Das könnte dich auch interessieren

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

10 Kommentare
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
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
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
Franz

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

Antworten
Michael
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
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
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
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
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
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

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! 🙌

Digitales High Five
Holger Schellkopf (Chefredakteur t3n)

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