Lottie Android and Compose 4.0

Hot on the heels of Jetpack Compose 1.0 is the first stable release of Lottie Compose. The Compose team took the time to rethink nearly every Android API including Animations. As a result, it wouldn’t have felt natural to take the existing LottieAnimationView and simply wrap it in an AndroidView interop composable. Instead, we took the time to do the same for Lottie. The result is an entirely new set of APIs that feels right at home with the new APIs in Jetpack Compose.

Because lottie-compose is such a major new addition, it will be released as Lottie 4.0 and versions will be synced with lottie-android going forward.

To play a Lottie animation, you need three things:

1. A LottieComposition object - the stateless data model parsed from JSON.
2. An animation that produces a progress value.
3. A composable that will render the LottieComposition at the given progress.

Creating a LottieComposition

Creating a composition is as simple as this:

LottieCompositionSpec specifies which animation to load and where to load it from. Refer to the docs for advanced functionality such as retries or handling loading/error states.

This is analogous to Compose’s rememberScrollState() function and other remember* functions.

Animating a LottieComposition

Once you have a LottieComposition, you have to animate its progress. Doing so is as simple as calling:

There are overloads for everything from speed to clipping.

This is analogous to Compose’s animate*AsState functions.

Alternatively, you can use Lottie Compose’s imperative Animatable API

This is analogous to Compose’s Animatable APIs.

Because all you need to animate a composition is a progress float, you may replace the Lottie animators with absolutely anything including gestures, download progress, or other signals from your app.

Rendering a LottieComposition

Now that you have your LottieComposition and progress, you can put it all together and render it with the LottieAnimation composable

The composable supports Alignment and ContentScale just like the standard Image composable. It also supports existing Lottie features such as dynamic properties.

If you tried out any of the early lottie-compose alphas, you might recognize that the APIs changed and became more consistent with the Compose ecosystem. The introduction of Jetpack Compose is a once-in-a-decade transition for a platform like Android and we are all learning how to design APIs for this new world together. Many thanks to Doris Liu who worked on many of the Compose animation APIs and helped brainstorm how Lottie could fit into the ecosystem seamlessly. Countless hours and thousands of lines of code were written (and thrown away) running experiments and trying out different types of APIs to wind up with this version.

If you or your company is one of the tens of thousands of companies that use Lottie, there is a 99.99% chance that you haven’t sponsored it yet. Lottie is built and maintained entirely on nights and weekends out of a passion for the project. Lottie accepts sponsorship from individual as well as corporate GitHub and OpenCollective accounts.

You can read about the different options here.