How to Animate Content Changes in Jetpack Compose?

In this article, we will learn how to animate content changes in Jetpack Compose using the AnimatedContent() and animateContentSize() composables.

1. AnimatedContent:

AnimatedContent composable animates the content changes. Currently, it is experimental.

Let’s understand it with an example.

@Composable
fun MyUI() {

    var count by remember {
        mutableStateOf(0)
    }

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

        Text(text = "Count: $count")

        Button(
            modifier = Modifier.padding(top = 8.dp),
            onClick = {
                count++
            }
        ) {
            Text(text = "Increase Count")
        }
    }
}

Output:

Let’s animate the count value. Wrap the Text() inside the AnimatedContent() composable.

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun MyUI() {

    var count by remember {
        mutableStateOf(0)
    }

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

        AnimatedContent(targetState = count) { targetState ->
            Text(text = "Count: $targetState")
        }
        
        Button(
            modifier = Modifier.padding(top = 8.dp),
            onClick = {
                count++
            }
        ) {
            Text(text = "Increase Count")
        }
    }
}

Output:

Let’s look at the AnimatedContent() composable.

@ExperimentalAnimationApi
@Composable
fun <S> AnimatedContent(
    targetState: S,
    modifier: Modifier = Modifier,
    transitionSpec: AnimatedContentScope<S>.() -> ContentTransform = {
        fadeIn(animationSpec = tween(220, delayMillis = 90)) +
            scaleIn(initialScale = 0.92f…