Skip to content
Animation

AnimatedContent

Animate the swap between two content states

AnimatedContent animates the transition whenever its targetState changes, cross-fading (and optionally sliding) between the old and new content. It is well suited to swapping a number, label, or whole layout in response to state.

AnimatedContent demos rendered in Compose Playground
Pixel-accurate preview · light theme

Examples

01

Counter

The number animates as it changes with the +/- buttons.

Kotlin
var count by remember { mutableIntStateOf(0) }
Row {
    Button(onClick = { count-- }) { Text("-") }
    AnimatedContent(targetState = count, label = "count") { value ->
        Text("$value", style = MaterialTheme.typography.displaySmall)
    }
    Button(onClick = { count++ }) { Text("+") }
}