Lottie Animation

Habt ihr euch schon mal gefragt, wie auf Webseiten und in Smartphone Apps Animationen möglichst effizient verwendet werden können? Hierzu möchten wir euch gerne das Animationsdateiformat Lottie vorstellen und erklären, was dessen Verbindung zu Airbnb und einer deutschen Animationsfilmerin aus dem Jahre 1926 ist. Aber alles der Reihe nach. Wie ihr vielleicht schon mal bemerkt habt, sind heutzutage auf vielen Webseiten und Smartphone Apps hochauflösende und komplexe Animationen eingebunden.

Dies war jedoch nicht immer so und noch vor einigen Jahren war das Erstellen und Einbinden solcher Animationen ein komplexer und langwieriger Prozess. Man musste entweder umfangreiche Bilddateien aus vielen Einzelbildern erzeugen (z.B. GIF) oder dutzende Zeilen Code schreiben. Daraus resultierend waren Animationen in diesen Medien nicht weit verbreitet.

Wie bereits angedeutet, hat sich dies mittlerweile jedoch geändert und ist unter anderem dem Animationsformat Lottie zu verdanken. Lottie ist ein JSON-basiertes Animationsdateiformat, welches Designern und Entwicklern ermöglicht Animationen auf jeder Plattform so einfach wie statische Assets zu verwenden. Eine Besonderheit ist, dass Lottie-Files nur einen Bruchteil der Dateigröße haben, wie beispielsweise Animationen im Format GIF. Darüber hinaus können mit Lottie Animationen deutlich farbintensivere und schärfere (vektorbasierte) Animationen erzeugt und eingebunden werden. Hinsichtlich der Erstellung sind Lottie Animationen auch deutlich unkomplizierter. Mithilfe der Compositing- und Animationssoftware After Effects und einem Plugin können komplexe Animationen direkt in das Lottie Format exportiert werden.

Die Grundidee Animationen als skiptbasiertes Dateiformat auszugeben hatte 2015 der Webentwickler Hernan Torrisi. Im Jahr 2017 wurden die damaligen Airbnb-Entwickler Brandon Withrow, Gabriel Peal und Leland Richardson auf das neuartige Dateiformat aufmerksam und unterstützten Torissi bei der Entwicklung, sowie dem Aufbau von Bibliotheken für Android und iOS. Gemeinsam wurde sich auch auf die offizielle Bezeichnung Lottie geeinigt. Der Name verweist auf die deutsche Silhouetten-Animationsfilmerin Lotte Reiniger, die 1926 den ersten abendfüllenden Trickfilm schuf.

Für weitere Informationen zu dem Dateiformat, sowie den möglichen Einsatzgebieten, könnt ihr die offizielle Website von Lottie besuchen.

 

Quellen:

 

––––––––––––

 

Have you ever wondered how to implement animations on websites and smartphone apps in the most space-saving way possible? We would like to introduce you to the Lottie animation file format and explain its connection to Airbnb and a German animator from 1926. But let’s take it one step at a time. As you may have noticed, many websites and smartphone apps nowadays include high-resolution and complex animations.

However, this wasn’t always the case and just a few years ago, creating and embedding such animations was a difficult and tedious process. You either had to create extensive image files from many individual images (e.g. GIF) or write dozens of lines of code. As a result, animations were not widely used in these media.

However, as indicated earlier, this has now changed, and this is thanks in part to the Lottie animation format. Lottie is a JSON-based animation file format that allows designers and developers to use animations on any platform as easily as static assets. A unique feature is that Lottie files are a fraction of the file size as, say, animations in GIF format. In addition, Lottie animations can be used to create and include much more color-intensive and sharper (vector-based) animations. In terms of creation, Lottie animations are also significantly less complicated. Using the compositing and animation software After Effects and a plugin, complex animations can be exported directly into the Lottie format.

The basic idea to output animations as a script-based file format came from web developer Hernan Torrisi in 2015. In 2017, then-Airbnb developers Brandon Withrow, Gabriel Peal and Leland Richardson became aware of the new file format and helped Torissi develop it, as well as build libraries for Android and iOS. Together, they also agreed on the official name Lottie. The name refers to German silhouette animator Lotte Reiniger, who created the first feature-length animated film in 1926.

For more information about the file format, as well as its possible uses, you can visit Lottie’s official website.