---
title: "CapturedAnimatedVisibility"
description: "[CapturedAnimatedVisibility] animates the appearance and disappearance of its content as [visible] changes."
type: "composable"
---
## API Reference

### CapturedAnimatedVisibility

> Source set: Common

```kotlin
@Composable
public fun CapturedAnimatedVisibility(
    visible: Boolean,
    modifier: Modifier = Modifier,
    enter: EnterTransition = fadeIn() + expandIn(),
    exit: ExitTransition = shrinkOut() + fadeOut(),
    label: String = "CapturedAnimatedVisibility",
    content: @Composable () -> Unit,
)
```

[CapturedAnimatedVisibility](/jetpack-compose/androidx.compose.animation/animation/composable-functions/CapturedAnimatedVisibility/api) animates the appearance and disappearance of its content as
`visible` changes. Unlike [AnimatedVisibility](/jetpack-compose/androidx.compose.animation/animation/composable-functions/AnimatedVisibility/api), when `visible` becomes false the child
composition is removed **immediately** and the exit transition animates the last captured frame
of the content via a graphics layer. This means the caller does not need to retain any data for
the content once `visible` is false.

[CapturedAnimatedVisibility](/jetpack-compose/androidx.compose.animation/animation/composable-functions/CapturedAnimatedVisibility/api) is designed for content removal animations where there is a need to
immediately release resources or a desire to no longer maintain data or states during exit. Since
[CapturedAnimatedVisibility](/jetpack-compose/androidx.compose.animation/animation/composable-functions/CapturedAnimatedVisibility/api) displays a layer that captured the rendering of the content, it will
also not respond to any gestures. In contrast, content in [AnimatedVisibility](/jetpack-compose/androidx.compose.animation/animation/composable-functions/AnimatedVisibility/api) remains live in
composition during exit, responding to touch input and continuing internal animations (e.g.
shared element or infinite animations) until the exit animation finishes and the content is
removed from composition.

Because the content is no longer live during exit, no [AnimatedVisibilityScope](/jetpack-compose/androidx.compose.animation/animation/interfaces/AnimatedVisibilityScope/api) is provided to
the content lambda.

#### Parameters

| | |
| --- | --- |
| visible | controls whether the content should be visible |
| modifier | [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) for the layout |
| enter | [EnterTransition](/jetpack-compose/androidx.compose.animation/animation/classes/EnterTransition) used for the appearing animation |
| exit | [ExitTransition](/jetpack-compose/androidx.compose.animation/animation/classes/ExitTransition) applied to the last captured frame when disappearing |
| label | label to differentiate from other animations in Android Studio Animation Preview |
| content | content to appear or disappear based on [visible](/jetpack-compose/androidx.compose.foundation/foundation-layout/modifiers/visible) |

### CapturedAnimatedVisibility

> Source set: Common

```kotlin
@Composable
public fun CapturedAnimatedVisibility(
    visibleState: MutableTransitionState<Boolean>,
    modifier: Modifier = Modifier,
    enter: EnterTransition = fadeIn() + expandIn(),
    exit: ExitTransition = shrinkOut() + fadeOut(),
    label: String = "CapturedAnimatedVisibility",
    content: @Composable () -> Unit,
)
```

Animates the appearance and disappearance of its content as `visibleState`'s target state
changes.

Using a `MutableTransitionState` allows observing the state of the animation (e.g.
`MutableTransitionState.currentState`, * `MutableTransitionState.targetState`, and
`MutableTransitionState.isIdle`) as well as setting an initial visibility state that is different
than the `MutableTransitionState.targetState` to animate content upon entering composition.

Unlike [AnimatedVisibility](/jetpack-compose/androidx.compose.animation/animation/composable-functions/AnimatedVisibility/api), when `visibleState`'s
`targetState` becomes `false` the child composition is
removed **immediately** in [CapturedAnimatedVisibility](/jetpack-compose/androidx.compose.animation/animation/composable-functions/CapturedAnimatedVisibility/api). The exit transition animates the last
captured frame of the content via a graphics layer.

#### Parameters

| | |
| --- | --- |
| visibleState | [MutableTransitionState](/jetpack-compose/androidx.compose.animation/animation-core/classes/MutableTransitionState) controlling visibility and allowing animation state observation |
| modifier | [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) for the layout |
| enter | [EnterTransition](/jetpack-compose/androidx.compose.animation/animation/classes/EnterTransition) used for the appearing animation |
| exit | [ExitTransition](/jetpack-compose/androidx.compose.animation/animation/classes/ExitTransition) applied to the last captured frame when disappearing |
| label | label to differentiate from other animations in Android Studio Animation Preview |
| content | content to appear or disappear based on [visibleState](#visiblestate) |

## Code Examples

### CapturedAnimatedVisibilitySample

```kotlin
@Sampled
@Composable
fun CapturedAnimatedVisibilitySample() {
    var visible by remember { mutableStateOf(true) }
    Column {
        Button(onClick = { visible = !visible }) { Text(if (visible) "Hide" else "Show") }
        Spacer(Modifier.height(16.dp))
        CapturedAnimatedVisibility(
            visible = visible,
            enter = fadeIn() + expandVertically(),
            exit = fadeOut() + shrinkVertically(),
        ) {
            // Child composition is removed immediately when visible becomes false
            Box(Modifier.size(100.dp).background(Color.Blue, shape = RoundedCornerShape(8.dp)))
        }
    }
}
```

### CapturedAnimatedVisibilityMutableTransitionStateSample

```kotlin
@Sampled
@Composable
fun CapturedAnimatedVisibilityMutableTransitionStateSample() {
    // MutableTransitionState allows observing the animation status (currentState, targetState, and
    // isIdle) as well as setting an initial currentState = false and targetState = true to animate
    // in immediately upon entering composition.
    val visibleState = remember { MutableTransitionState(false) }.apply { targetState = true }

    Column {
        Button(onClick = { visibleState.targetState = !visibleState.targetState }) {
            Text(if (visibleState.targetState) "Hide" else "Show")
        }
        Spacer(Modifier.height(8.dp))
        // Observe the current animation status directly via visibleState properties
        Text(
            "State: current=${visibleState.currentState}, " +
                "target=${visibleState.targetState}, " +
                "isIdle=${visibleState.isIdle}"
        )
        Spacer(Modifier.height(16.dp))
        CapturedAnimatedVisibility(
            visibleState = visibleState,
            enter = fadeIn() + expandVertically(),
            exit = fadeOut() + shrinkVertically(),
        ) {
            // Content animates IN from false -> true upon initial composition.
            // When targetState becomes false, child composition is removed immediately
            // while the last captured graphics layer frame animates OUT.
            Box(Modifier.size(100.dp).background(Color.Red, shape = RoundedCornerShape(8.dp)))
        }
    }
}
```