The Future of Lottie

Our community-driven vision for our animation tool.

Categories: Behind the Scenes, News — Salih Abdul-Karim, Gabriel Peal and Brandon Withrow

When we released Lottie six months ago, we never imagined it would be embraced by the community as it has been. It is inspiring to hear from people in person, through emails, on Twitter, and on GitHub about how happy they are to have an animation solution for their apps. We’ve read articles written by designers and engineers whom we respect — such as Nick Butcher, Valentina Berois, Chris Basha, Christopher Deane, and many others  — that tell us specifically how Lottie has allowed them to create animations more easily.

Companies like Google, Elevate, eero, The New York Times, Instacart, Uber, Walgreens, iHeartRadio, and others have shared their work with us and given us important insights into how they are using Lottie in their apps.  Watching a community evolve around Lottie has inspired us to share our own insights from new open source projects, such as “Modern Pictograms for Lottie”,  a collaboration between Airbnb Design, The Noun Project, and John Caserta. But more importantly, this community has inspired us to expand our thinking around how we’re building Lottie, and its future growth and development.

 

Community-inspired improvements

Observing how various platforms have utilized Lottie has led us to examine how we might improve certain features. As an example, we have seen companies using Lottie to dynamically update elements of animation during runtime. In their app, The New York Times uses Lottie for their static header logo. Where they would have had to create two separate logos in the past – one white, and one black – using Lottie has allowed them to change the color of the logo from black to white programmatically.

This application of the tool got us thinking about how else we might improve Lottie’s abilities to update layers of animation as an app is running. Beyond changing elements such as colors, we’re developing the ability to programmatically change any property of any layer at runtime – elements such as stroke width, opacity, scale, position data, and more. This could become useful for a wide range of products. For example, an app that needs to have artwork with different stroke weights can change from 1px to 2px dynamically on the fly and bypass the need to create multiple assets.

We have begun experimenting with other features as well, such as the ability to string multiple animations together. We observed how eero has utilized Lottie for their home wi-fi setup animation flow. They have taken several pieces of animation and chained them together to create one fluid motion. At various points in their flow, certain animations need to loop until an action is complete, at which point the sequence dovetails seamlessly into the next section. Together the animations feel as if they are one when, in fact, there are multiple.

We had never thought of chaining several animations together in this way, or having them loop. We asked ourselves if we could make this easier, or if we could loop small sections within animations. We have since begun working on the ability to play from frame to frame as well as the ability to loop one section of a larger animation based on a composition marker. We hope to ultimately make chaining animations much easier with Lottie.

One last example of our community’s impact on our future goals for Lottie comes from an website called lottiefiles.com. Created by Nattu Adnan and Shafiu Hussain, and with over 70,000 downloads to date, lottiefiles.com provides free animations compatible with Bodymovin and Lottie, and allows designers and engineers to test animations before implementing them. Where they would typically have to plug a JSON file into their code in order to preview it, an engineer or designer can now simply drag a JSON file onto lottiefiles.com, scan a QR code, and view a preview of their animation.  This makes testing and sharing animations simple where it has traditionally been cumbersome. Lottiefiles.com has also launched profiles so users can have their own private or public collections.

Lottiefiles.com got us thinking about how we can create better ways for people to find performance information about an animation. Lottiefiles.com has certainly opened our eyes to what other designers are building and implementing; can we help others find that information? This has spurred us to add numerous performance tools, create a Mac OS app for testing animations, and release a QR code reader in our sample app to test Lottiefiles animations.

 

Creating a knowledge hub

These are just three examples of how the community has inspired us to update Lottie based on how we see them using it. These cases and more are going to be shown on our consolidated documentation site at airbnb.io/lottie. This site combines all of the knowledge and information about each platform, as well as much needed information about After Effects and Bodymovin. In the coming months, we will continue to add walkthroughs, tutorials, and real-world examples to build a richer knowledge base for all to use.

 

We hope you’ll keep sharing with us

We’d like to understand how people use Lottie, as well as what they need to know before they start. But beyond discussing Lottie and its uses, we’re also calling for actual assets and source files. We’ve created a private, internal testing repository that we use for regression tests so that as we add new features to Lottie, we can ensure that it’s not breaking older versions of animations that companies are using in their apps. If you’re using Lottie, please reach out to us at lottie@airbnb.com, and send us files for our private test repo, or examples for our community showcase.

We’re thrilled you’re using Lottie, and we’re so excited to see all the amazing applications the community has in store.

Salih Abdul-Karim is an Experience and Motion Designer at Airbnb.
Gabriel Peal is an engineer at Airbnb.
Brandon Withrow is an engineer at Airbnb.

Up Next