Introducing Lottie

Our new open-source tool makes adding animation to native apps a snap.

AirbnbEng
AirbnbEng
Feb 1, 2017 · 5 min read

Build rich animations with ease

Lottie allows engineers to build richer animations without the painstaking overhead of re-writing them. Nick Butcher’s jump through animation, Bartek Lipinski’s hamburger menu, and Miroslaw Stanek’s Twitter heart demonstrate just how difficult and time consuming it can be to re-create animations from scratch. With Lottie, digging through frameworks for reference, guessing durations, manually creating Bézier curves, and re-making animations with nothing more than a GIF for reference will be a thing of the past. Now engineers can use exactly what the designer intended, exactly how it was made. To demonstrate that, we’ve recreated their animations and provided After Effects and JSON files of each in our sample app.

Flexible and efficient solution

Airbnb is a global company that supports millions of guests and hosts, so having a flexible animation format that is playable on multiple platforms was extremely important to us. There are libraries similar to Lottie, such as Marcus Eckert’s Squall and Facebook’s Keyframes, but our goals are slightly different. Facebook picked a small set of After Effects features to support, since they were focusing mainly on reactions, but we want to support as many as possible. As for Squall, designers at Airbnb use it in combination with Lottie because it has an amazing After Effects preview app that’s become a necessary part of our workflow. However, it only supports iOS and our engineering teams needed a cross-platform solution.

Building community

Releasing something as open source is more than just putting it out there for the public to use. It’s a bridge that connects people and creates community. As we got closer to releasing Lottie to designers and engineers via GitHub, we wanted to be sure to connect with the animation folks as well.

From left to right: Jr.canest on Motion Corpse, Al Boardman from 9 Squares, Animography’s Mobilo animated typeface

Airbnb Engineering & Data Science

Creative engineers and data scientists building a world where you can belong anywhere. http://airbnb.io

AirbnbEng

Written by

AirbnbEng

Creative engineers and data scientists building a world where you can belong anywhere. http://airbnb.io

Airbnb Engineering & Data Science

Creative engineers and data scientists building a world where you can belong anywhere. http://airbnb.io