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.
Sources: