---
title: "AnimatedVisibilityScope"
description: "This is the scope for the content of [AnimatedVisibility]. In this scope, direct and indirect
children of [AnimatedVisibility] will be able to define their own enter/exit transitions using
the built-in options via [Modifier.animateEnterExit]. They will also be able define custom
enter/exit animations using the [transition] object. [AnimatedVisibility] will ensure both custom
and built-in enter/exit animations finish before it considers itself idle, and subsequently
removes its content in the case of exit.
__Note:__ Custom enter/exit animations that are created *independent* of the
[AnimatedVisibilityScope.transition] will have no guarantee to finish when exiting, as
[AnimatedVisibility] would have no visibility of such animations."
type: "interface"
---
Interface
Common
```kotlin
@JvmDefaultWithCompatibility
public interface AnimatedVisibilityScope
```
This is the scope for the content of `AnimatedVisibility`. In this scope, direct and indirect
children of `AnimatedVisibility` will be able to define their own enter/exit transitions using
the built-in options via `Modifier.animateEnterExit`. They will also be able define custom
enter/exit animations using the `transition` object. `AnimatedVisibility` will ensure both custom
and built-in enter/exit animations finish before it considers itself idle, and subsequently
removes its content in the case of exit.
__Note:__ Custom enter/exit animations that are created *independent* of the
`AnimatedVisibilityScope.transition` will have no guarantee to finish when exiting, as
`AnimatedVisibility` would have no visibility of such animations.
## Functions
```kotlin
public fun Modifier.animateEnterExit(
enter: EnterTransition = fadeIn(),
exit: ExitTransition = fadeOut(),
label: String = "animateEnterExit",
): Modifier
```
`animateEnterExit` modifier can be used for any direct or indirect children of
`AnimatedVisibility` to create a different enter/exit animation than what's specified in
`AnimatedVisibility`. The visual effect of these children will be a combination of the
`AnimatedVisibility`'s animation and their own enter/exit animations.
`enter` and `exit` defines different `EnterTransition`s and `ExitTransition`s that will be
used for the appearance and disappearance animation. There are 4 types of `EnterTransition`
and `ExitTransition`: Fade, Expand/Shrink, Scale and Slide. The enter transitions can be
combined using `+`. Same for exit transitions. The order of the combination does not matter,
as the transition animations will start simultaneously. See `EnterTransition` and
`ExitTransition` for details on the three types of transition.
By default, the enter transition will be a `fadeIn` of the content. And the exit transition
will be fading out the content using `fadeOut`.
In some cases it may be desirable to have `AnimatedVisibility` apply no animation at all for
enter and/or exit, such that children of `AnimatedVisibility` can each have their distinct
animations. To achieve this, `EnterTransition.None` and/or `ExitTransition.None` can be used
for `AnimatedVisibility`.
## Code Examples
### AVScopeAnimateEnterExit
```kotlin
@Composable
fun AVScopeAnimateEnterExit() {
@OptIn(ExperimentalAnimationApi::class)
@Composable
fun AnimatedVisibilityScope.Item(modifier: Modifier, backgroundColor: Color) {
// Creates a custom enter/exit animation for scale property.
val scale by
transition.animateFloat { enterExitState ->
// Enter transition will be animating the scale from 0.9f to 1.0f
// (i.e. PreEnter -> Visible). Exit transition will be from 1.0f to
// 0.5f (i.e. Visible -> PostExit)
when (enterExitState) {
EnterExitState.PreEnter -> 0.9f
EnterExitState.Visible -> 1.0f
EnterExitState.PostExit -> 0.5f
}
}
// Since we defined `Item` as an extension function on AnimatedVisibilityScope, we can use
// the `animateEnterExit` modifier to produce an enter/exit animation for it. This will
// run simultaneously with the `AnimatedVisibility`'s enter/exit.
Box(
modifier
.fillMaxWidth()
.padding(5.dp)
.animateEnterExit(
// Slide in from below,
enter = slideInVertically(initialOffsetY = { it }),
// No slide on the way out. So the exit animation will be scale (from the custom
// scale animation defined above) and fade (from AnimatedVisibility)
exit = ExitTransition.None,
)
.graphicsLayer {
scaleX = scale
scaleY = scale
}
.clip(RoundedCornerShape(20.dp))
.background(backgroundColor)
.fillMaxSize()
) {
// Content of the item goes here...
}
}
@Composable
fun AnimateMainContent(mainContentVisible: MutableTransitionState) {
Box {
// Use the `MutableTransitionState` to specify whether AnimatedVisibility
// should be visible. This will also allow AnimatedVisibility animation states to be
// observed externally.
AnimatedVisibility(
visibleState = mainContentVisible,
modifier = Modifier.fillMaxSize(),
enter = fadeIn(),
exit = fadeOut(),
) {
Box {
Column(Modifier.fillMaxSize()) {
// We have created `Item`s below as extension functions on
// AnimatedVisibilityScope in this example. So they can define their own
// enter/exit to run alongside the enter/exit defined in AnimatedVisibility.
Item(Modifier.weight(1f), backgroundColor = Color(0xffff6f69))
Item(Modifier.weight(1f), backgroundColor = Color(0xffffcc5c))
}
// This FAB will be simply fading in/out as specified by the AnimatedVisibility
FloatingActionButton(
onClick = {},
modifier = Modifier.align(Alignment.BottomEnd).padding(20.dp),
backgroundColor = MaterialTheme.colors.primary,
) {
Icon(Icons.Default.Favorite, contentDescription = null)
}
}
}
// Here we can get a signal for when the Enter/Exit animation of the content above
// has finished by inspecting the MutableTransitionState passed to the
// AnimatedVisibility. This allows sequential animation after the enter/exit.
AnimatedVisibility(
// Once the main content is visible (i.e. targetState == true), and no pending
// animations. We will start another enter animation sequentially.
visible = mainContentVisible.targetState && mainContentVisible.isIdle,
modifier = Modifier.align(Alignment.Center),
enter = expandVertically(),
exit = fadeOut(animationSpec = tween(50)),
) {
Text("Transition Finished")
}
}
}
}
```