--- title: "DeferredAnimatedVisibility" description: "AnimatedVisibility can be used to animate the appearance and disappearance of its content as the Transition state changes." type: "composable" lastmod: "2026-05-20T01:13:52.626296Z" --- ## API Reference ### DeferredAnimatedVisibility > Source set: Common ```kotlin @ExperimentalDeferredTransitionApi @Composable public fun DeferredTransition.DeferredAnimatedVisibility( visible: (T) -> Boolean, modifier: Modifier = Modifier, enter: EnterTransition = fadeIn() + expandIn(), exit: ExitTransition = shrinkOut() + fadeOut(), mutableTransform: MutableTransform? = null, content: @Composable() AnimatedVisibilityScope.() -> Unit, ) ``` [AnimatedVisibility](/jetpack-compose/androidx.compose.animation/animation/composable-functions/AnimatedVisibility) can be used to animate the appearance and disappearance of its content as the [Transition](/jetpack-compose/androidx.compose.animation/animation-core/classes/Transition) state changes. [visible](/jetpack-compose/androidx.compose.foundation/foundation-layout/modifiers/visible) defines whether the content should be visible based on transition state T. [modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) modifier for the [Layout](/jetpack-compose/androidx.compose.ui/ui/composable-functions/Layout) created to contain the `content` `enter` EnterTransition(s) used for the appearing animation, fading in while expanding vertically by default `exit` ExitTransition(s) used for the disappearing animation, fading out while shrinking vertically by default [mutableTransform](/jetpack-compose/androidx.compose.animation/animation/classes/MutableTransform) A block to control the visual transformations during the deferred phase (e.g., for predictive back gestures) before the main transition begins. This is only active if the [Transition](/jetpack-compose/androidx.compose.animation/animation-core/classes/Transition) was created using [rememberTransition](/jetpack-compose/androidx.compose.animation/animation-core/composable-functions/rememberTransition) with [DeferredTransitionState](/jetpack-compose/androidx.compose.animation/animation-core/classes/DeferredTransitionState). By default, this is `null`, meaning no manual transformations are applied. This phase starts when [DeferredTransitionState.defer](/jetpack-compose/androidx.compose.animation/animation-core/classes/DeferredTransitionState) is called and ends when [DeferredTransitionState.animateTo](/jetpack-compose/androidx.compose.animation/animation-core/classes/DeferredTransitionState) is called to start the automatic transition. During this phase, you can manually manipulate the content's transformations (like [TransformScope.alpha](/jetpack-compose/androidx.compose.animation/animation/interfaces/TransformScope) and [TransformScope.scale](/jetpack-compose/androidx.compose.animation/animation/interfaces/TransformScope)). These transformations are applied **on top of** the transition's initial state. Once the transition starts, the manually applied transformations are seamlessly handed off to the configured `enter` and `exit` transitions. For exiting content, a "sustain unless specified" policy is applied: if an exit transition (e.g. `fadeOut`) is specified, the hand-off will animate towards the target value of that transition. However, if no exit transition is specified for a given property (e.g. `slideOut` is missing), that property will sustain its last manual value until the entire transition completes. While in the deferred phase, entering content remains in the [EnterExitState.PreEnter](/jetpack-compose/androidx.compose.animation/animation/classes/EnterExitState.PreEnter) state, and exiting content remains in the [EnterExitState.Visible](/jetpack-compose/androidx.compose.animation/animation/classes/EnterExitState.Visible) state. `content` Content to appear or disappear based on the visibility derived from the [Transition.targetState](/jetpack-compose/androidx.compose.animation/animation-core/classes/Transition) and the provided [visible](/jetpack-compose/androidx.compose.foundation/foundation-layout/modifiers/visible) lambda ## Code Examples ### AddAnimatedVisibilityToGenericTransitionSample ```kotlin @OptIn(ExperimentalAnimationApi::class) @Composable fun AddAnimatedVisibilityToGenericTransitionSample() { @Composable fun ItemMainContent() { Row(Modifier.height(100.dp).fillMaxWidth(), Arrangement.SpaceEvenly) { Box( Modifier.size(60.dp) .align(Alignment.CenterVertically) .background(Color(0xffcdb7f6), CircleShape) ) Column(Modifier.align(Alignment.CenterVertically)) { Box(Modifier.height(30.dp).width(300.dp).padding(5.dp).background(Color.LightGray)) Box(Modifier.height(30.dp).width(300.dp).padding(5.dp).background(Color.LightGray)) } } } @OptIn(ExperimentalAnimationApi::class) @Composable fun SelectableItem() { // This sample animates a number of properties, including AnimatedVisibility, as a part of // the Transition going between selected and unselected. Box(Modifier.padding(15.dp)) { var selected by remember { mutableStateOf(false) } // Creates a transition to animate visual changes when `selected` is changed. val selectionTransition = updateTransition(selected) // Animates the border color as a part of the transition val borderColor by selectionTransition.animateColor { isSelected -> if (isSelected) Color(0xff03a9f4) else Color.White } // Animates the background color when selected state changes val contentBackground by selectionTransition.animateColor { isSelected -> if (isSelected) Color(0xffdbf0fe) else Color.White } // Animates elevation as a part of the transition val elevation by selectionTransition.animateDp { isSelected -> if (isSelected) 10.dp else 2.dp } Surface( shape = RoundedCornerShape(10.dp), border = BorderStroke(2.dp, borderColor), modifier = Modifier.clickable { selected = !selected }, color = contentBackground, elevation = elevation, ) { Column(Modifier.fillMaxWidth()) { ItemMainContent() // Creates an AnimatedVisibility as a part of the transition, so that when // selected it's visible. This will hoist all the animations that are internal // to AnimatedVisibility (i.e. fade, slide, etc) to the transition. As a result, // `selectionTransition` will not finish until all the animations in // AnimatedVisibility as well as animations added directly to it have finished. selectionTransition.AnimatedVisibility( visible = { it }, enter = expandVertically(), exit = shrinkVertically(), ) { Box(Modifier.fillMaxWidth().padding(10.dp)) { Text( "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed" + " eiusmod tempor incididunt labore et dolore magna aliqua. " + "Ut enim ad minim veniam, quis nostrud exercitation ullamco " + "laboris nisi ut aliquip ex ea commodo consequat. Duis aute " + "irure dolor." ) } } } } } } } ``` ### DeferredAnimatedVisibilitySample ```kotlin @OptIn(ExperimentalDeferredTransitionApi::class) @Composable fun DeferredAnimatedVisibilitySample() { // In a real app, these states would be driven by a gesture handler like PredictiveBackHandler var visible by remember { mutableStateOf(true) } var isBackGestureInProgress by remember { mutableStateOf(false) } var swipeOffset by remember { mutableStateOf(IntOffset.Zero) } val transitionState = remember { DeferredTransitionState(visible) } val transition = rememberTransition(transitionState) LaunchedEffect(isBackGestureInProgress, visible) { if (isBackGestureInProgress) { transitionState.defer(visible) } else { transitionState.animateTo(visible) } } transition.DeferredAnimatedVisibility( visible = { it }, mutableTransform = MutableTransform { fullSize -> if (isBackGestureInProgress) { val progressX = (swipeOffset.x.toFloat() / fullSize.width).coerceIn(0f, 1f) // Shrink the content down to 80% as the user swipes scale = 1f - (progressX * 0.2f) // Slide the content along the swipe offset = swipeOffset } }, ) { Box(Modifier.size(200.dp).background(Color.Red)) } } ```