AnimatedContent

Animates content changes with enter/exit transitions.

Basic Usage

var count by remember { mutableStateOf(0) }

AnimatedContent(
    targetState = count,
    transitionSpec = {
        // Compare entering and exiting states to decide direction
        if (targetState > initialState) {
            slideInVertically { -it } + fadeIn() togetherWith
                slideOutVertically { it } + fadeOut()
        } else {
            slideInVertically { it } + fadeIn() togetherWith
                slideOutVertically { -it } + fadeOut()
        }.using(SizeTransform(clip = false))
    },
    label = "counter"
) { targetCount ->
    Text(text = "$targetCount", fontSize = 48.sp)
}

Button(onClick = { count++ }) { Text("+") }
Button(onClick = { count-- }) { Text("-") }

Custom Enter/Exit Transitions

AnimatedContent(
    targetState = isExpanded,
    transitionSpec = {
        fadeIn(animationSpec = tween(300)) togetherWith
            fadeOut(animationSpec = tween(300))
    }
) { expanded ->
    if (expanded) {
        ExpandedContent()
    } else {
        CollapsedContent()
    }
}