Transitions

Enter and exit transitions for AnimatedVisibility and AnimatedContent.

Enter Transitions

fadeIn()
slideIn()
slideInHorizontally()
slideInVertically()
scaleIn()
expandIn()
expandHorizontally()
expandVertically()

Exit Transitions

fadeOut()
slideOut()
slideOutHorizontally()
slideOutVertically()
scaleOut()
shrinkOut()
shrinkHorizontally()
shrinkVertically()

Combine Transitions

Use + operator to combine multiple transitions:

AnimatedVisibility(
    visible = isVisible,
    enter = fadeIn() + slideInVertically(),
    exit = fadeOut() + slideOutVertically()
) {
    Content()
}

Crossfade

Simple fade transition between content:

var toggle by remember { mutableStateOf(false) }
Column {
    Button(onClick = { toggle = !toggle }) {
        Text("Toggle to see CrossFade")
    }
    Crossfade(toggle) { toggle ->
        when (toggle) {
            true -> Icon(Icons.Default.Add, contentDescription = "")
            false -> Icon(Icons.Default.Call, contentDescription = "")
        }
    }
}

updateTransition

Animate multiple values together:

var toggle: Boolean by remember { mutableStateOf(false) }
val transition = updateTransition(targetState = toggle, label = "")
val color by transition.animateColor(label = "") { s ->
    when (s) {
        true -> Color.Red
        false -> Color.Yellow
    }
}
val size by transition.animateDp(label = "") { s ->
    when (s) {
        true -> 200.dp
        false -> 100.dp
    }
}

Column {
    Button(onClick = {
        toggle = !toggle
    }) { Text("Click to change Color & Size") }
    Box(
        Modifier
            .background(color)
            .size(size)
    )
}