Line chart animation in compose

LineChart.kt

 val state = remember(line.points, animate) {
    MutableTransitionState(if (animate) 0f else 1f).also { it.targetState = 1f }
}
val transition = rememberTransition(state, label = "transition")

    
val heightFraction by transition.animateFloat(
    label = "height",
    transitionSpec = {
        tween(
            durationMillis = animationDurationMs,
            delayMillis = animDelayMs,
            easing = EaseOutCubic,
        )
    },
    targetValueByState = { it }
)
val widthFraction by transition.animateFloat(
    label = "width",
    transitionSpec = {
        tween(
            durationMillis = animationDurationMs,
            delayMillis = animDelayMs,
            easing = EaseOutCubic,
        )
    },
    targetValueByState = { it }
)

 Canvas(
    modifier = Modifier
        .weight(1f, fill = true)
        .fillMaxHeight()
) {
    val clipPath = Path()
    clipPath.addRect(
        Rect(
            left = chartLineArea.left, // chartLineArea is the canvas rect - some margins.
            top = 0f,
            right = chartLineArea.left + widthFraction * chartLineArea.width, // this will smoothly expand the clipped rect
            bottom = size.height,
        )
    )
    clipPath(clipPath) {
        // draw line chart within clipped area to animate the line appearing smoothly 
        val path = Path()
        path.drawChartLine(
            line = line,
            area = chartLineArea,
            heightFraction = heightFraction, // limit max height by animated value to achieve "squished/growing" look
            lineDistance = horizontalDistanceDelta,
            minValue = line.minValue,
            maxValue = line.maxValue,
            bezierIntensity = bezierIntensity,
        ) 
    }