Lottie for Jetpack Compose

When we released Lottie 1.0 in 2017, it was just a few baby steps from its hackathon roots. Since then, Lottie has evolved into a mature library that has become the industry standard for enabling beautiful animations across any platform. Lottie for Android just crossed 30,000 stars on GitHub and is used in tens of thousands of apps across billions of devices. With this popularity comes a responsibility for Lottie to work reliably and for it to adapt as the Android community evolves.

The next major chapter for the Android world will revolve around Jetpack Compose. Jetpack Compose is a fundamental re-architecture of the way that Android apps are written. It is modern, builds on the success of React, SwiftUI, Flutter, and other functional reactive frameworks, and is built on top of Kotlin. There is no doubt that, before long, all Android apps will be written with Jetpack Compose.

Lottie Compose Alpha

To prepare for this major shift, I have begun work on Lottie Compose and am releasing an early preview today.

Using Lottie with Jetpack Compose is as easy as ever. This is the simplest way to display an animation:

Just like Lottie Android, Lottie Compose allows you to manually control animations, adjust its speed, etc. You can view more examples and further documentation here. Lottie Compose is built on top of the existing Android renderer so it is fully backward compatible with animations that work today. In the future, the renderer may be rewritten entirely using Compose vector APIs.

Releasing Lottie Compose early and in an alpha state is incredibly important to its success. The Compose APIs are not production ready and continue to evolve. In addition, we, as a community, are still learning the best ways to design APIs for a Compose world. The APIs released in Lottie Compose Alpha are not final and I welcome any and all feedback to help guide them in a better direction.

Try it out today:

Lottie Android 3.5

In addition to Lottie Compose Alpha, I am releasing Lottie Android 3.5.0. This release contains a handful of conveniences including:

• A new global configuration to provide your own network stack or logger.
• An API to outline masks and mattes for debugging purposes. Large mattes and masks are the number one reason animations have poor performance.
• Support for dotLottie files.
• Support for pause listeners.

How You Can Help

Building Lottie takes a lot of time and energy. Lottie requires managing GitHub issues and feature requests, actually fixing said issues, building, and testing new features, working with companies who have large Lottie integrations, and embarking on new projects such as Lottie Compose. If you use Lottie, there are a few ways you can help out.

Help Shape Lottie Compose

If you try Lottie Compose and have ideas for how to improve it, file an issue on GitHub or reach out to me on Twitter.

Contribute to the Project

At any given time, there are a handful of open issues. Feel free to work on one of them and put up a PR directly.

Sponsor Lottie on Open Collective or GitHub

Lottie is also on Open Collective. You can read more about Lottie’s Open Collective page and Airbnb’s involvement here.

Lottie is available on GitHub Sponsors. To sponsor the project, click the sponsor button at the top of the repo. Your sponsorship contributes to work done on Lottie outside of our day jobs (all of it).