8/9/24, 10:30 AM Animation modifiers and composables | Jetpack Compose | Android Developers

Animation modifiers and

composables
Compose comes with built-in composables and modifiers for handling common
animation use cases.

Built-in animated composables

Animate appearance and disappearance with AnimatedVisibility

Figure 1. Animating the appearance and disappearance of an item in a column

The AnimatedVisibility
(/reference/kotlin/androidx/compose/animation/package-
summary#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animatio
n.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1))
composable animates the appearance and disappearance of its content.

https://developer.android.com/develop/ui/compose/animation/composables-modifiers 1/12
8/9/24, 10:30 AM Animation modifiers and composables | Jetpack Compose | Android Developers

AnimatedVisibility(visible) {
// your composable here
// ...
}
ippets/src/main/java/com/example/compose/snippets/animations/AnimationQuickGuide.kt#L133-L148)

By default, the content appears by fading in and expanding, and it disappears by fading
out and shrinking. The transition can be customized by specifying EnterTransition
(/reference/kotlin/androidx/compose/animation/EnterTransition) and ExitTransition
(/reference/kotlin/androidx/compose/animation/ExitTransition).

var visible by remember { mutableStateOf(true) }

val density = LocalDensity.current
AnimatedVisibility(
visible = visible,
enter = slideInVertically {
// Slide in from 40 dp from the top.
with(density) { -40.dp.roundToPx() }
} + expandVertically(
// Expand from the top.
expandFrom = Alignment.Top
) + fadeIn(
// Fade in with the initial alpha of 0.3f.
initialAlpha = 0.3f
),
exit = slideOutVertically() + shrinkVertically() + fadeOut()
) {
Text("Hello", Modifier.fillMaxWidth().height(200.dp))
}
/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt#L142-L159)

As you can see in the example above, you can combine multiple EnterTransition or
ExitTransition objects with a + operator, and each accepts optional parameters to
customize its behavior. See the references for more information.

EnterTransition and ExitTransition examples

https://developer.android.com/develop/ui/compose/animation/composables-modifiers 2/12
8/9/24, 10:30 AM Animation modifiers and composables | Jetpack Compose | Android Developers

EnterTransition

fadeIn (/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.

slideIn (/reference/kotlin/androidx/compose/animation/package-summary#slideIn(androidx.compose

slideInHorizontally
(/reference/kotlin/androidx/compose/animation/package-summary#slideInHorizontally(androidx.comp

slideInVertically
(/reference/kotlin/androidx/compose/animation/package-summary#slideInVertically(androidx.compose

scaleIn
(/reference/kotlin/androidx/compose/animation/package-
summary#scaleIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compos

https://developer.android.com/develop/ui/compose/animation/composables-modifiers 3/12
8/9/24, 10:30 AM Animation modifiers and composables | Jetpack Compose | Android Developers

expandIn
(/reference/kotlin/androidx/compose/animation/package-
summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Align

expandHorizontally
(/reference/kotlin/androidx/compose/animation/package-
summary#expandHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compo

expandVertically
(/reference/kotlin/androidx/compose/animation/package-
summary#expandVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose

AnimatedVisibility also offers a variant that takes a MutableTransitionState . This

allows you to trigger an animation as soon as the AnimatedVisibility is added to the
composition tree. It is also useful for observing the animation state.

// Create a MutableTransitionState<Boolean> for the AnimatedVisibility.

val state = remember {
MutableTransitionState(false).apply {
// Start the animation immediately.
targetState = true
}
}
Column {
AnimatedVisibility(visibleState = state) {
Text(text = "Hello, world!")
}

https://developer.android.com/develop/ui/compose/animation/composables-modifiers 4/12
8/9/24, 10:30 AM Animation modifiers and composables | Jetpack Compose | Android Developers

// Use the MutableTransitionState to know the current animation state

// of the AnimatedVisibility.
Text(
text = when {
state.isIdle && state.currentState -> "Visible"
!state.isIdle && state.currentState -> "Disappearing"
state.isIdle && !state.currentState -> "Invisible"
else -> "Appearing"
}
)
}
/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt#L167-L189)

Animate enter and exit for children

Content within AnimatedVisibility (direct or indirect children) can use the
animateEnterExit
(/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#
(androidx.compose.ui.Modifier).animateEnterExit(androidx.compose.animation.EnterTransition,androi
dx.compose.animation.ExitTransition,kotlin.String))
modifier to specify different animation behavior for each of them. The visual effect for
each of these children is a combination of the animations specified at the
AnimatedVisibility composable and the child's own enter and exit animations.

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
visible = visible,
enter = fadeIn(),
exit = fadeOut()
) {
// Fade in/out the background and the foreground.
Box(Modifier.fillMaxSize().background(Color.DarkGray)) {
Box(
Modifier
.align(Alignment.Center)
.animateEnterExit(
// Slide in/out the inner box.
enter = slideInVertically(),
exit = slideOutVertically()
)
.sizeIn(minWidth = 256.dp, minHeight = 64.dp)

https://developer.android.com/develop/ui/compose/animation/composables-modifiers 5/12
8/9/24, 10:30 AM Animation modifiers and composables | Jetpack Compose | Android Developers

.background(Color.Red)
) {
// Content of the notification…
}
}
}
/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt#L198-L221)

In some cases, you may want to have AnimatedVisibility apply no animations at all so
that children can each have their own distinct animations by animateEnterExit . To
achieve this, specify EnterTransition.None and ExitTransition.None at the
AnimatedVisibility composable.

Add custom animation

If you want to add custom animation effects beyond the built-in enter and exit
animations, access the underlying Transition instance via the transition property
inside the content lambda for AnimatedVisibility . Any animation states added to the
Transition instance will run simultaneously with the enter and exit animations of
AnimatedVisibility . AnimatedVisibility waits until all animations in the Transition
have finished before removing its content. For exit animations created independent of
Transition (such as using animate*AsState ), AnimatedVisibility would not be able
to account for them, and therefore may remove the content composable before they
finish.

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
visible = visible,
enter = fadeIn(),
exit = fadeOut()
) { // this: AnimatedVisibilityScope
// Use AnimatedVisibilityScope#transition to add a custom animation
// to the AnimatedVisibility.
val background by transition.animateColor(label = "color") { state ->
if (state == EnterExitState.Visible) Color.Blue else Color.Gray
}
Box(modifier = Modifier.size(128.dp).background(background))
}
snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt#L230-L243)

https://developer.android.com/develop/ui/compose/animation/composables-modifiers 6/12
8/9/24, 10:30 AM Animation modifiers and composables | Jetpack Compose | Android Developers

See updateTransition (/develop/ui/compose/animation/value-based#updatetransition) for the

details about Transition .

Animate based on target state with AnimatedContent

The AnimatedContent
(/reference/kotlin/androidx/compose/animation/package-
summary#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compo
se.ui.Alignment,kotlin.Function2))
composable animates its content as it changes based on a target state.

Row {
var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
Text("Add")
}
AnimatedContent(targetState = count) { targetCount ->
// Make sure to use `targetCount`, not `count`.
Text(text = "Count: $targetCount")
}
}
snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt#L267-L276)

Note that you should always use the lambda parameter and reflect it to the content. The
API uses this value as the key to identify the content that's currently shown.

By default, the initial content fades out and then the target content fades in (this
behavior is called fade through
(https://material.io/design/motion/the-motion-system.html#fade-through)). You can customize this
animation behavior by specifying a ContentTransform
(/reference/kotlin/androidx/compose/animation/ContentTransform) object to the transitionSpec
parameter. You can create ContentTransform by combining an EnterTransition
(/reference/kotlin/androidx/compose/animation/EnterTransition) with an ExitTransition
(/reference/kotlin/androidx/compose/animation/ExitTransition) using the with infix function. You
can apply SizeTransform
(/reference/kotlin/androidx/compose/animation/package-
summary#SizeTransform(kotlin.Boolean,kotlin.Function2))
to the ContentTransform by attaching it with the using infix function.

https://developer.android.com/develop/ui/compose/animation/composables-modifiers 7/12
8/9/24, 10:30 AM Animation modifiers and composables | Jetpack Compose | Android Developers

AnimatedContent(
targetState = count,
transitionSpec = {
// Compare the incoming number with the previous number.
if (targetState > initialState) {
// If the target number is larger, it slides up and fades in
// while the initial (smaller) number slides up and fades out.
slideInVertically { height -> height } + fadeIn() with
slideOutVertically { height -> -height } + fadeOut()
} else {
// If the target number is smaller, it slides down and fades in
// while the initial number slides down and fades out.
slideInVertically { height -> -height } + fadeIn() with
slideOutVertically { height -> height } + fadeOut()
}.using(
// Disable clipping since the faded slide-in/out should
// be displayed out of bounds.
SizeTransform(clip = false)
)
}
) { targetCount ->
Text(text = "$targetCount")
}
snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt#L284-L306)

EnterTransition defines how the target content should appear, and ExitTransition
defines how the initial content should disappear. In addition to all of the
EnterTransition and ExitTransition functions available for AnimatedVisibility ,
AnimatedContent offers slideIntoContainer
(/reference/kotlin/androidx/compose/animation/AnimatedContentScope#slideIntoContainer(androidx.
compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAni
mationSpec,kotlin.Function1))
and slideOutOfContainer
(/reference/kotlin/androidx/compose/animation/AnimatedContentScope#slideOutOfContainer(android
x.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteA
nimationSpec,kotlin.Function1))
. These are convenient alternatives to slideInHorizontally/Vertically and

https://developer.android.com/develop/ui/compose/animation/composables-modifiers 8/12
8/9/24, 10:30 AM Animation modifiers and composables | Jetpack Compose | Android Developers

slideOutHorizontally/Vertically that calculate the slide distance based on the sizes

of the initial content and the target content of the AnimatedContent content.

SizeTransform (/reference/kotlin/androidx/compose/animation/SizeTransform) defines how the

size should animate between the initial and the target contents. You have access to both
the initial size and the target size when you are creating the animation. SizeTransform
also controls whether the content should be clipped to the component size during
animations.

var expanded by remember { mutableStateOf(false) }

Surface(
color = MaterialTheme.colorScheme.primary,
onClick = { expanded = !expanded }
) {
AnimatedContent(
targetState = expanded,
transitionSpec = {
fadeIn(animationSpec = tween(150, 150)) with
fadeOut(animationSpec = tween(150)) using
SizeTransform { initialSize, targetSize ->
if (targetState) {
keyframes {
// Expand horizontally first.
IntSize(targetSize.width, initialSize.height) at
durationMillis = 300
}
} else {
keyframes {
// Shrink vertically first.
IntSize(initialSize.width, targetSize.height) at
durationMillis = 300
}
}
}
}
) { targetExpanded ->
if (targetExpanded) {
Expanded()
} else {
ContentIcon()
}
}
}
/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt#L313-L346)

https://developer.android.com/develop/ui/compose/animation/composables-modifiers 9/12
8/9/24, 10:30 AM Animation modifiers and composables | Jetpack Compose | Android Developers

Animate child enter and exit transitions

Just like AnimatedVisibility , the animateEnterExit
(/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#
(androidx.compose.ui.Modifier).animateEnterExit(androidx.compose.animation.EnterTransition,androi
dx.compose.animation.ExitTransition,kotlin.String))
modifier is available inside the content lambda of AnimatedContent . Use this to apply
EnterAnimation and ExitAnimation to each of the direct or indirect children separately.

Add custom animation

Just like AnimatedVisibility , the transition field is available inside the content
lambda of AnimatedContent . Use this to create a custom animation effect that runs
simultaneously with the AnimatedContent transition. See updateTransition
(/develop/ui/compose/animation/value-based#updatetransition) for the details.

Animate between two layouts with Crossfade

Crossfade animates between two layouts with a crossfade animation. By toggling the
value passed to the current parameter, the content is switched with a crossfade
animation.

var currentPage by remember { mutableStateOf("A") }

Crossfade(targetState = currentPage) { screen ->
when (screen) {
"A" -> Text("Page A")
"B" -> Text("Page B")
}
}

https://developer.android.com/develop/ui/compose/animation/composables-modifiers 10/12
8/9/24, 10:30 AM Animation modifiers and composables | Jetpack Compose | Android Developers

snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt#L363-L369)

Built-in animation modifiers

Animate composable size changes with animateContentSize

Figure 2. Composable smoothly animating between a small and a larger size

The animateContentSize modifier animates a size change.

Note: The ordering of where animateContentSize is placed in your modifier chain matters. For
smooth animations, ensure you place it before any size modifiers such as size or defaultMinSize to
ensure that animateContentSize reports the animated value change to the Layout.

.animateContentSize()

https://developer.android.com/develop/ui/compose/animation/composables-modifiers 11/12
8/9/24, 10:30 AM Animation modifiers and composables | Jetpack Compose | Android Developers

ppets/src/main/java/com/example/compose/snippets/animations/AnimationQuickGuide.kt#L260-L275)

List item animations

If you are looking to animate item reorderings inside a Lazy list or grid, take a look at the
Lazy layout item animation documentation (/develop/ui/compose/lists#item-animations).

Previous
arrow_back Quick guide (/develop/ui/compose/animation/quick-guide)
Next
Value-based animations (/develop/ui/compose/animation/value-based) arrow_forward

Content and code samples on this page are subject to the licenses described in the Content License
(/license). Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.

Last updated 2024-08-06 UTC.

https://developer.android.com/develop/ui/compose/animation/composables-modifiers 12/12