Lottie
Die Zukunft der Web-Animationen?
Animationen lenken die Aufmerksamkeit der Nutzer gezielt auf die Inhalte einer Webseite und erhöhen so deren visuelle Anziehungskraft. Das Nutzererlebnis erreicht eine neue Qualität, wenn Lottie-Animationen Webseiten lebendiger und emotionaler wirken lassen. Sie helfen dabei, Inhalte gezielt hervorzuheben und die Aufmerksamkeit sinnvoll zu lenken. Seit der Einführung des Grafikformats Lottie im Jahr 2015 ist es deutlich einfacher geworden, Animationen zu erstellen und nahtlos in Webseiten zu integrieren.
Genau hier setzen wir an und geben einen kompakten Einblick in die Welt von Lottie. Zum Verständnis lohnt sich ein kurzer Blick zurück: Animationen wurden lange Zeit entweder direkt per Code umgesetzt oder pixelbasiert mithilfe von Grafikprogrammen wie Adobe Photoshop oder Adobe Illustrator erstellt.
Lottie-Animationen – von Vektoren und Codes
Animierte Grafiken basieren häufig auf pixelbasierten Videodateien. Der Haken dabei: Bei ihrer Erstellung geht die Skalierbarkeit von Vektordaten verloren. Zudem entstehen bei der Komprimierung oft sichtbare Artefakte, die die Darstellungsqualität beeinträchtigen. Mitarbeitende von Airbnb haben dieses Problem aufgegriffen und mit Lottie eine Lösung entwickelt. Doch was steckt dahinter?
Lottie ist ein Open-Source-Animationsformat, das auf JSON basiert und somit mit Vektordaten arbeitet. Dadurch lassen sich hochwertige, interaktive Animationen mit vergleichsweise geringem Datenvolumen umsetzen. Ein weiterer Vorteil: Animationen können sogar nachträglich direkt auf einer bereits live geschalteten Website angepasst werden.
Unabhängig davon, ob eine Animation ursprünglich per Code oder mit einem Grafikprogramm erstellt wurde, spart Lottie Zeit und Aufwand. Statt mehrere Varianten zu pflegen, genügt eine einzige Asset-Datei, die flexibel und plattformübergreifend eingesetzt werden kann.
Gut zu Wissen
Der Name Lottie geht übrigens auf die deutsche Filmregisseurin Charlotte („Lotte“) Reiniger zurück, die Pionierin der Silhouettenanimation war.
Alles Lottie? Die Vorteile im Überblick
Lottie-Animationen sind nicht nur optisch ansprechend und verleihen Webseiten mehr Dynamik. Sie bieten darüber hinaus eine Reihe praktischer Vorteile, die sich im Arbeitsalltag bewährt haben und Prozesse spürbar effizienter machen:
- 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.