Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.
It all started with…
A Hackathon. At Airbnb, Hackathons were a regular occurrence. They gave engineers space to stretch their muscles, and explore new territory. In my third year at Airbnb, I was a Hackathon veteran. Previously I had built a fun road trip app using Airbnb’s search to find Airbnb’s within 30 miles of a driving route, and an app that finds the most dominate saturated color in a photo -for coloring UI to match Airbnb photos. For this particular Hackathon I wanted to build a useful tool. I partnered with Airbnb’s lead animator, Salih Abdul-Karim. We wanted to build an iOS app that could process and render vector animations from After Effects. Salih had found a plugin for After Effects, Body Movin’, that exported animation data in a small JSON format.
We started simple, with a square. Salih built a series of animations, each one slightly more complex than the previous, each adding a new animation feature. By the end of the Hackathon we had complex bezier paths animating. We realized that we were onto something and continued to pursue the project in our personal time. We searched for an upcoming project at Airbnb to add a single animation to. Months later we had shipped our first animation and decided to open source the project. I decided to name the project Lottie, after the animation pioneer Lotte Reiniger.
Flash forward two years later. Lottie is Airbnb’s largest open source project. It has renderers on iOS, Android and Web. It is being used by several top companies, and has won numerous design awards. The promise of Lottie is simple -allow designers to create rich, beautiful animations without adding to app size or engineering time.
Rendering / Animation Technologies
Open Source Management
iOS + MacOS + TVOS