Jetpack Compose: Control Lottie Animations with Animatable

StartButton.kt

// StartButton.kt
package com.remziakgoz.coffeepomodoro.presentation.components

import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.airbnb.lottie.compose.*

@Composable
fun StartButton(
    modifier: Modifier = Modifier,
    shouldStart: Boolean,
    onClick: () -> Unit
) {
    val composition by rememberLottieComposition(LottieCompositionSpec.Asset("coffeeButton.json"))
    var isAnimating by remember { mutableStateOf(false) }
    val animatable = rememberLottieAnimatable()

    LaunchedEffect(isAnimating) {
        composition?.let {
            animatable.animate(
                composition = it,
                clipSpec = if (isAnimating)
                    LottieClipSpec.Progress(0f, 0.5f)
                else
                    LottieClipSpec.Progress(0.5f, 1f)
            )
        }
    }

    LottieAnimation(
        composition = composition,
        progress = { animatable.progress },
        modifier = modifier
            .size(300.dp)
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = null
            ) {
                isAnimating = !isAnimating
                onClick()
            }
    )
}