Lottie: The new open-source animation tool

Lottie: The new open-source animation tool


Behind the scenes of the new open-source animation tool.

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.

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 Nativeand I on experience design) began our journey by building on top of Torrisi’s phenomenal work.


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.

The goal is to support as many After Effects features as possible, to allow for a lot more than simple icon animations. They have 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.




Flexible and efficient 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.



Download Bodymovin, Lottie iOS, Android and React Native.


This article have been co-written by  Brandon Withrow Gabriel Peal and Salih Abdul-Karim.