Created by Airbnb engineers as a side project, Lottie lets developers incorporate After Effects animations in real time without the need to rewrite them. At the time of this writing, Lottie supports masks, alpha mattes, trim paths, solids, and dash patterns, with more being added “on a regular basis.” There is also an optional caching mechanism that allows frequently used animations to load faster.
“Lottie allows engineers to build richer animations without the painstaking overhead of rewriting them,” wrote the team in a blog post. “With Lottie, digging through frameworks for reference, guessing durations, manually creating Bézier curves, and remaking animations with nothing more than a GIF for reference will be a thing of the past.”
The end result are animations that are visually pleasing and have a sense of life and energy to them, factors which Airbnb engineers hope will lead to increased engagement or interactivity for developers’ apps. You might even see Airbnb incorporate Lottie into its own app, so do not be surprised if you see more animations with a future update.
Airbnb engineers did recognize that other libraries similar to Lottie already exist, such as Facebook’s Keyframes and Marcus Eckert’s Squall. With Keyframes, though, Facebook picked a small set of After Effect features to support for its reactions, while Airbnb engineers want to incorporate as many features as possible within Lottie. Squall, meanwhile, is used in combination with Lottie, but the former only supports iOS, and Airbnb engineers wanted Lottie to be cross-platform.
Lottie is currently available for iOS, Android, and React Native.
