# AnimatedVisibilityScope

Artifact: [androidx.compose.animation:animation](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/AnimatedVisibility.kt+class:androidx.compose.animation.AnimatedVisibilityScope) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0) Common/AllAndroid/JVM
- Cmn

  ```
  interface AnimatedVisibilityScope
  ```
Known direct subclasses [AnimatedContentScope](https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedContentScope), [AnimatedPaneScope](https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AnimatedPaneScope)

|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedContentScope` | Receiver scope for content lambda for AnimatedContent. |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AnimatedPaneScope` | Scope for the content of `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AnimatedPane.composable#(androidx.compose.material3.adaptive.layout.ExtendedPaneScaffoldPaneScope).AnimatedPane(androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1,androidx.compose.ui.graphics.Shape,kotlin.Function1)`. |

*** ** * ** ***

This is the scope for the content of `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`. In this scope, direct and indirect children of `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` will be able to define their own enter/exit transitions using the built-in options via `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#(androidx.compose.ui.Modifier).animateEnterExit(androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String)`. They will also be able define custom enter/exit animations using the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#transition()` object. `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` 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 `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#transition()` will have no guarantee to finish when exiting, as `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` would have no visibility of such animations.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.AnimatedVisibilityScope
import androidx.compose.animation.EnterExitState
import androidx.compose.animation.ExitTransition
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideIn
import androidx.compose.animation.slideInVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.dp

@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<Boolean>) {
    Box {
        // Use the `MutableTransitionState<Boolean>` 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")
        }
    }
}
```

## Summary

| ### Public functions |
|---|---|---|
| `open https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#(androidx.compose.ui.Modifier).animateEnterExit(androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String)( enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition, exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition, label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html )` `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#(androidx.compose.ui.Modifier).animateEnterExit(androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String)` modifier can be used for any direct or indirect children of `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` to create a different enter/exit animation than what's specified in `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`. | Cmn |

| ### Public properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition<https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterExitState>` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#transition()` `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#transition()` allows custom enter/exit animations to be specified. | Cmn |

## Public functions

### Modifier.animateEnterExit

Cmn Artifact: [androidx.compose.animation:animation](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/AnimatedVisibility.kt+function:animateEnterExit) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
open fun Modifier.animateEnterExit(
    enter: EnterTransition = fadeIn(),
    exit: ExitTransition = fadeOut(),
    label: String = "animateEnterExit"
): Modifier
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#(androidx.compose.ui.Modifier).animateEnterExit(androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String)` modifier can be used for any direct or indirect children of `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` to create a different enter/exit animation than what's specified in `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`. The visual effect of these children will be a combination of the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`'s animation and their own enter/exit animations.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#(androidx.compose.ui.Modifier).animateEnterExit(androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#(androidx.compose.ui.Modifier).animateEnterExit(androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String)` defines different `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition`s and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`s that will be used for the appearance and disappearance animation. There are 4 types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/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 `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` for details on the three types of transition.

By default, the enter transition will be a `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` of the content. And the exit transition will be fading out the content using `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)`.

In some cases it may be desirable to have `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` apply no animation at all for enter and/or exit, such that children of `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` can each have their distinct animations. To achieve this, `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition#None()` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#None()` can be used for `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideIn
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOut
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun FullScreenNotification(visible: Boolean) {
    AnimatedVisibility(visible = visible, enter = fadeIn(), exit = fadeOut()) {
        // Fade in/out the background and foreground
        Box(Modifier.fillMaxSize().background(Color(0x88000000))) {
            Box(
                Modifier.align(Alignment.TopStart)
                    .animateEnterExit(
                        // Slide in/out the rounded rect
                        enter = slideInVertically(),
                        exit = slideOutVertically(),
                    )
                    .clip(RoundedCornerShape(10.dp))
                    .requiredHeight(100.dp)
                    .fillMaxWidth()
                    .background(Color.White)
            ) {
                // Content of the notification goes here
            }
        }
    }
}
```

## Public properties

### transition

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0)

```
val transition: Transition<EnterExitState>
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#transition()` allows custom enter/exit animations to be specified. It will run simultaneously with the built-in enter/exit transitions specified in `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`.