Lottie in Jetpack Compose

Airbnb's Lottie for Android has a Compose library, lottie-compose, with a LottieAnimation composable.

Install

implementation("com.airbnb.android:lottie-compose:6.7.1")

Checked on 7 October 2026: lottie-compose 6.7.1 on Maven Central.

A working example

This plays the Wave dots loading animation from the free library. Download its Lottie JSON file, then:

1. Put wave-dots-loader.json in app/src/main/assets/.

2. Call the composable.

import android.provider.Settings
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import com.airbnb.lottie.compose.LottieAnimation
import com.airbnb.lottie.compose.LottieCompositionSpec
import com.airbnb.lottie.compose.LottieConstants
import com.airbnb.lottie.compose.rememberLottieComposition

@Composable
fun WaveDotsLoader(modifier: Modifier = Modifier) {
    val composition by rememberLottieComposition(LottieCompositionSpec.Asset("wave-dots-loader.json"))
    // The system animation scale is 0 when the user switches animations off.
    val resolver = LocalContext.current.contentResolver
    val still = Settings.Global.getFloat(resolver, Settings.Global.ANIMATOR_DURATION_SCALE, 1f) == 0f
    val box = modifier.size(64.dp).semantics { contentDescription = "Loading" }
    if (still) {
        // A frame 30% of the way in, where the animation is complete.
        LottieAnimation(composition = composition, progress = { 0.298f }, modifier = box)
    } else {
        LottieAnimation(
            composition = composition,
            modifier = box,
            iterations = LottieConstants.IterateForever,
        )
    }
}

The example reads the system animation scale itself. When it is 0, it uses the LottieAnimation that takes a fixed progress, so it shows a frame 30% of the way in, where the animation is complete.

semantics gives the animation a content description for TalkBack. A decorative one uses clearAndSetSemantics so TalkBack skips it.

Every animation in the library has this code on its page with its own file name filled in.

Common problems

The file is rejected in res/raw

Resource file names can only use lowercase letters, numbers and underscores, so wave-dots-loader.json fails there. Put it in src/main/assets and load it with LottieCompositionSpec.Asset, which takes any file name.

Animations are switched off in system settings

By default Lottie divides its speed by the system animation scale. When that scale is 0, the speed becomes effectively infinite. Reading the scale and passing isPlaying = false, like the example, keeps it on the first frame instead.

It plays once

iterations defaults to 1. Pass LottieConstants.IterateForever to loop.

Nothing shows

rememberLottieComposition loads the file in the background, and the composition stays null until it is ready. If it never appears, check the asset name. The result's error property holds the reason.

Free downloads

The editor and every export format are free, with no card and no Mosso watermark. Library downloads need a free account. You can download up to 50 library animations a day, with the limit resetting at midnight UTC. Each download contains one animation.

Create a free account or sign in to download from the library. Read the library licence before sharing the finished work.

The same code for other platforms: HTML, React, React Native, Flutter, SwiftUI, Webflow, Framer, WordPress.