Skip to content
Animation

AnimatedVisibility

Animate content as it enters and leaves composition

AnimatedVisibility animates the appearance and disappearance of its content. Combine enter transitions like fadeIn and expandVertically with matching exits such as fadeOut and shrinkVertically to control how content slides into view.

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

Examples

01

Fade & expand

Toggle to fade and expand the panel in and out.

Kotlin
var visible by remember { mutableStateOf(true) }
Button(onClick = { visible = !visible }) {
    Text(if (visible) "Hide" else "Show")
}
AnimatedVisibility(
    visible = visible,
    enter = fadeIn() + expandVertically(),
    exit = fadeOut() + shrinkVertically()
) {
    Box(Modifier.fillMaxWidth().size(96.dp).background(Color(0xFF6750A4)))
}