Kottie

Compose Multiplatform animation library that parses Adobe After Effects animations. Inspired by Airbnb/Lottie.

Getting Started

To integrate Kottie into your Kotlin Multiplatform project

Add the dependency in your common module's commonMain source set

implementation("io.github.ismai117:kottie:latest_version")

In Xcode, select “File” → “Add Packages...”
Enter https://github.com/airbnb/lottie-spm.git

Load Animation Composition

Load the animation composition using rememberKottieComposition function. Choose the appropriate specification for loading the composition (File, Url, or JsonString).

var animation by remember { mutableStateOf("") }

LaunchedEffect(Unit){
    animation = Res.readBytes("files/animation.json").decodeToString()
}

val composition = rememberKottieComposition(
    spec = KottieCompositionSpec.File(animation) // Or KottieCompositionSpec.Url || KottieCompositionSpec.JsonString
)

Display the Animation

Display the animation using KottieAnimation composable

MaterialTheme {

    Column(
        modifier = modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {

        KottieAnimation(
            composition = composition,
            progress = { animationState.progress },
            modifier = modifier.size(300.dp)
        )

    }
}

Control Animation Playback

You can control animation playback by using a mutableStateOf variable to toggle the animation on and off.

var playing by remember { mutableStateOf(false) }

val animationState by animateKottieCompositionAsState(
    composition = composition,
    isPlaying = playing
)

MaterialTheme {

    Column(
        modifier = modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {

        KottieAnimation(
            composition = composition,
            progress = { animationState.progress },
            modifier = modifier.size(300.dp)
        )

        Button(
           onClick = {
              playing = true
           }
        ){
           Text("Play")
        }

    }
}

Adjusting Speed

To change the playback speed of the animation, modify the speed parameter in the animateKottieCompositionAsState function. By default, the speed is set to 1f, indicating normal speed playback. You can increase the speed for faster playback or decrease it for slower playback.

val animationState by animateKottieCompositionAsState(
    composition = composition,
    speed = 1.5f // Adjust the speed as needed
)

Set Iterations

By default, the animation plays once and stops (iterations = 1). You can specify the number of times the animation should repeat using the iterations parameter. Alternatively, you can set it to KottieConstants.IterateForever for the animation to loop indefinitely.

val animationState by animateKottieCompositionAsState(
    composition = composition,
    iterations = 3 // Play the animation 3 times
)

Observing Animation State

You can observe animation state changes:

LaunchedEffect(
    key1 = animationState.isPlaying
) {
    if (animationState.isPlaying) {
        println("Animation Playing")
    }
    if (animationState.isCompleted) {
        println("Animation Completed")
        playing = false
    }
}