Introducing Lottie

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

By Brandon Withrow, Gabriel Peal, Leland Richardson and Salih Abdul-Karim

In the past, building complex animations for Android, iOS, and React Native apps was a difficult and lengthy process. You either had to add bulky image files for each screen size or write a thousand lines of brittle, hard-to-maintain code. Because of this, most apps weren’t using animation — despite it being a powerful tool for communicating ideas and creating compelling user experiences. One year ago, we set out to change that.

Today, we’re happy to introduce our solution. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, and allows native apps to use animations as easily as they use static assets. Lottie uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin. The extension is bundled with a JavaScript player that can render the animations on the web. Since February of 2015, Bodymovin’s creator, Hernan Torrisi, has built a solid foundation by adding features and improvements to the plugin on a monthly basis. Our team (Brandon Withrow on iOS, Gabriel Peal on Android, Leland Richardson on React Native, and I on experience design) began our journey by building on top of Torrisi’s phenomenal work.

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.

Our goal is to support as many After Effects features as we possibly can, to allow for a lot more than simple icon animations. We’ve created a handful of other examples to show the library’s flexibility, richness, and deep feature set. In the sample app, there are also source files for a variety of different kinds of animations, including basic line art, character-based animations, and dynamic logo animations with multiple angles and cuts.

We’ve already started shipping our own Lottie animations on several screens, including in-app notifications, full-frame animated illustrations, and in our review flow. And we plan to greatly expand our usage of animations in a fun yet useful way moving forward.

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.

Lottie also has several features built into its API to make it more versatile and efficient. It supports loading JSON files over the network, which is useful for A/B testing. It also has an optional caching mechanism, so frequently used animations, such as a wish-list heart, can load a cached copy each time. Lottie animations can be driven by gestures using the animated progress feature, and animation speed can be manipulated by changing a simple value. iOS even supports adding additional native UI to an animation at runtime, which can be used for complex animated transitions.

In addition to all of the After Effects features and API additions we’ve worked on so far, we have many ideas for the future. These include mapping views to Lottie animations, controlling view transitions with Lottie, support for Battle Axe’s RubberHose, gradient, type, and image support. The hardest part is picking which features to tackle next.

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.

We were inspired by the communities that 9 Squares, Motion Corpse, and Animography have created. All three have brought together people from around the world, who otherwise would never have worked together, to collaborate on public animation projects. These projects take months of work and a lot of organization and wrangling by the respective teams, but they undoubtedly provide immense value for the animation community as a whole. Motion Corpse and Animography publicly share the After Effects source files as well, which provide tons of insights on how people work.

Following their collaborative lead, we reached out to all three teams to contribute animations to our sample app. We’ve included an animation from Motion Corpse created by J.R. Canest, one of Al Boardman’s squares from the 9 Squares project, and an animated keyboard using Animography’s Mobilo animated typeface, which features work from more than two dozen artists. We’re hoping that the merging of these animation communities with the powerful engineering community will spark something special.

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

We’d love to hear how you’re using Lottie — no matter if you’re a designer, animator, or engineer. Feel free to reach out to us directly at lottie@airbnb.com with your thoughts, feedback, and insights. We’re excited to see what the community around the world will do when they begin to use Lottie in ways we never imagined.

Download Bodymovin, Lottie iOS, Android and React Native.

Originally posted on airbnb.design/lottie/