Skip to content
Animation

Crossfade

Cross-fade between mutually exclusive screens

Crossfade fades between two layouts based on a state value. It is the simplest way to animate a swap between mutually exclusive content, such as paging through a set of cards or switching between loading and loaded states.

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

Examples

01

Pages

Advance through three pages; each cross-fades into the next.

Kotlin
var page by remember { mutableIntStateOf(0) }
Crossfade(targetState = page, label = "page") { current ->
    Box(Modifier.fillMaxWidth().size(96.dp).background(pageColors[current])) {
        Text("Page ${current + 1}")
    }
}
Button(onClick = { page = (page + 1) % 3 }) { Text("Next") }