Skip to content
Animation

animate*AsState

Animate a single value whenever its target changes

The animate*AsState family interpolates a value toward a new target whenever that target changes. Swap in animateColorAsState, animateDpAsState, and friends to drive size, color, offset, or alpha — optionally with a spring for a bouncy feel.

animate*AsState demos rendered in Compose Playground
Pixel-accurate preview · light theme

Examples

01

Color & size

Tap to toggle; color and size animate to their new targets.

Kotlin
var toggled by remember { mutableStateOf(false) }
val color by animateColorAsState(
    targetValue = if (toggled) Color(0xFF6750A4) else Color(0xFF7D5260),
    label = "color"
)
val size by animateDpAsState(
    targetValue = if (toggled) 120.dp else 72.dp,
    animationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy),
    label = "size"
)
Box(Modifier.size(size).clip(RoundedCornerShape(16.dp)).background(color))
Button(onClick = { toggled = !toggled }) { Text("Toggle") }