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 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.