I'm trying to make something like this <image> exc...

# compose

[sen]

I'm trying to make something like this

image▾

except the animation only animates the first index of change of a string to the end of the string. For example 42 -> 43 would animate the 2 -> 3 (and any other numbers after if applicable). The animation code I'm basing this off of

The problem is, I don't know how exactly to remember the previous value. I tried doing something where I would simply remember it and update the previous value whenever DisposableEffect is invoked within the AnimatedContent, but for whatever reason it seems to be "delayed" by a value. Observing the value (the actual one, not the previous) I saw it cycles between the current and value it just was right before it incremented. I

[Marcin Wisniowski]

When I did that (for a countdown timer with 4 digits), I just made an animated composable that has 1 digit, and made my clock out of 4 of these. In your case, just have two animated `Text()`s, one for the first digit and one for the second, then they can animate separately. Nothing complex, the digits that don't change just don't animate.

[sen]

What did you use to actually animate it? AnimatedContent?

[Marcin Wisniowski]

Yeah, that's it:

@Composable
fun AnimatedNumberText(
    number: Int,
    style: TextStyle,
    color: Color,
    modifier: Modifier = Modifier
) {
    AnimatedContent(
        targetState = number,
        transitionSpec = {
            if (this.targetState > this.initialState) {
                slideIntoContainer(AnimatedContentScope.SlideDirection.Down) with
                    slideOutOfContainer(AnimatedContentScope.SlideDirection.Down)
            } else {
                slideIntoContainer(AnimatedContentScope.SlideDirection.Up) with
                    slideOutOfContainer(AnimatedContentScope.SlideDirection.Up)
            }
        },
        modifier = modifier
    ) {
        Text(
            text = "$it",
            style = style,
            color = color
        )
    }
}