LOTTIE – DIE ZUKUNFT DER WEB-ANIMATIONEN?

Bewegungen, die einfach Spaß machen, die Emotionen in uns wecken und die begeistern.

Animationen ziehen die so geliebte Aufmerksamkeit der Nutzer auf einer Webseite auf sich. Sie bringen das Nutzererlebnis auf ein neues Level, indem sie Webseiten menschlicher und gefühlvoller machen. Sie ermöglichen es, Informationen hervorzuheben. Mit dem Grafikformat Lottie wurde es seit 2015 zu einem vereinfachten Prozess, Animationen zu erstellen und auf Webseiten einzufügen. Und deshalb wollen wir Euch heute einen kleinen Einblick in die Lottie-Welt geben. Dabei ist es wichtig zu wissen, dass Animationen bislang auf zwei Weisen erstellt wurden: Auf Basis eines Codes oder pixelbasiert über ein Grafikprogramm, wie Photoshop oder Illustrator.

Lottie-Animationen – von Vektoren und Codes

Meist basieren animierte Grafiken auf pixelbasierten Videodateien. Das Problem: Beim Erstellen dieser pixelbasierten Animationen geht die Skalierbarkeit der Vektordaten verloren. Auch treten bei der Komprimierung der Grafiken immer wieder störende Komprimierungsartefakte auf. Mitarbeitende von Airbnb nahmen sich daraufhin diesem Problem an und entwickelten Lottie. Doch was genau steckt eigentlich dahinter?

Lottie ist ein sogenanntes Open-Source-Animationsdateiformat, das auf JSON-Daten und somit Vektordaten basiert. Dabei ermöglicht dieses neue Grafikformat qualitativ hochwertige und interaktive Animationen, die nur ein geringes Datenvolumen verbrauchen und auch auf einer Website bearbeitet werden können, die bereits live ist. Damit wird, egal ob eine Animation von Beginn an gecodet oder mithilfe eines Grafikprogramms erstellt wurde, wertvolle Zeit gespart. Schließlich reicht es, eine einzige Asset-Datei zu pflegen, die dann überall funktioniert.

Alles Lottie? Die Vorteile im Überblick

Lottie Animationen sehen natürlich nicht nur toll aus, sind ein Blickfang und beleben eine Webseite. Sie bringen darüber hinaus einige Vorteile mit sich, die sich im alltäglichen Arbeitsprozess gezeigt haben und damit Abläufe erleichtern:

• Lottie funktioniert als Grafikformat plattformübergreifend. Das bedeutet, dass die Lottie-Dateien auf Android, iOS, Web und React Native gleichermaßen verwendet werden können, ohne dass dabei Anpassungen vorgenommen werden müssen.
• Große Effekte bei kleiner Dateigröße. Lottie selbst führte hierzu folgenden Vergleich an: Ein PNG entspricht der Größe von T-Rex, ein GIF der eines Elefanten, wohingegen ein Lottie nur so groß ist, wie ein Welpe. Diese geringe Datei-Größe wirkt sich positiv auf die Download-Geschwindigkeit aus und reduziert den beanspruchten Speicherplatz. Eine Lottie Animation ist demzufolge 600% kleiner und lässt sich 10x schneller versenden als PNGs oder GIFs.
• Lottie-Animationen sind absolut pixelfrei – egal wie nah man heranzoomt, da sie text- und vektorbasiert sind. Das macht Lotties auflösungsunabhängig, skalierbar und interaktiv.
• Schnelles und einfaches Einfügen der Animationen auf Webseiten, in WordPress, Webflow oder Shopify. Denn über den Open-Source-Webplayer kann einfach der Code kopiert und darüber das Lottie eingefügt werden.

Mit einer Mischung aus Vektor- und Rasterelementen wird es so schließlich möglich, hochwertige Animationen auf mehreren Plattformen bei bester Auflösung zu integrieren.

Was ist LottieFiles?

LottieFiles ist eine eigene Plattform, um Animationen zu entdecken, zu testen oder mit anderen zusammenzuarbeiten. Hier kommen Designer, Entwickler, Animatoren und Ingenieure zusammen. Die Plattform unterstützt aber auch das Erstellen und Implementieren der Lottie-Animationen und hilft somit bei den einzelnen Arbeitsschritten. Während Lottie also die Animationsdatei selbst meint, handelt es sich bei LottieFiles um die Plattform, auf der die Animationen getestet und geteilt werden können.

Um das Erstellen und Bearbeiten von LottieFiles in einer grafischen Oberfläche zu ermöglichen, gibt es eine Auswahl an Plug-Ins und Editoren. Für Adobe After Effects gibt es beispielsweise ein Plug-In, welches es ermöglicht, Animationen direkt in eine Lottie-Datei zu konvertieren. Um auf den Webseiten selbst in den Lottie-Animations-Genuss zu kommen, ist ebenfalls ein Plug-In notwendig – meist in Form einer JavaScript-Bibliothek. Für einige CMS, wie für WordPress, gibt es bereits vorkonfigurierte Lösungen.

Lottie-Kurzwissen

• Mit Lottie können sowohl eigene Animationen erstellt als auch auf zahlreiche bestehende Animationen aus der Mediathek bzw. der Community zurückgegriffen werden.
• Wer seine eigene Animation erstellt hat, kann mit LottieFiles diese importieren und sich in der Vorschau anzeigen lassen. Um die Animation zu implementieren, wird ein Code der fertigen Lottie generiert, der dann ganz einfach an der gewünschten Stelle eingesetzt wird.
• Lotties können auf jeder Plattform verwendet werden – mobil und im Web. Sie bringen Bewegung auf Webseiten und in Apps und können auch als Sticker auf Messaging-Plattformen verwendet werden. Sogar in Desktop-Apps und auf einigen Uhren kommen sie zum Einsatz.