<div class='type'>Composable Function</div>


<a id='references'></a>


<h2 id="animatedvisibility-visible-modifier-enter-exit-label-content">AnimatedVisibility</h2>

<div class='sourceset sourceset-common'>Common</div>


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


`AnimatedVisibility` composable animates the appearance and disappearance of its content, as
`visible` value changes. Different `EnterTransition`s and `ExitTransition`s can be defined in
`enter` and `exit` 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.

Aside from these three types of `EnterTransition` and `ExitTransition`, `AnimatedVisibility` also
supports custom enter/exit animations. Some use cases may benefit from custom enter/exit
animations on shape, scale, color, etc. Custom enter/exit animations can be created using the
`Transition<EnterExitState>` object from the `AnimatedVisibilityScope` (i.e.
`AnimatedVisibilityScope.transition`). See the second sample code snippet below for example.
These custom animations will be running alongside of the built-in animations specified in `enter`
and `exit`. In cases where the enter/exit animation needs to be completely customized, `enter`
and/or `exit` can be specified as `EnterTransition.None` and/or `ExitTransition.None` as needed.
`AnimatedVisibility` will wait until *all* of enter/exit animations to finish before it considers
itself idle. `content` will only be removed after all the (built-in and custom) exit animations
have finished.

`AnimatedVisibility` creates a custom `Layout` for its content. The size of the custom layout is
determined by the largest width and largest height of the children. All children will be aligned
to the top start of the `Layout`.

__Note__: Once the exit transition is finished, the `content` composable will be removed from the
tree, and disposed. If there's a need to observe the state change of the enter/exit transition
and follow up additional action (e.g. remove data, sequential animation, etc), consider the
AnimatedVisibility API variant that takes a `MutableTransitionState` parameter.

By default, the enter transition will be a combination of `fadeIn` and `expandIn` of the content
from the bottom end. And the exit transition will be shrinking the content towards the bottom end
while fading out (i.e. `fadeOut` + `shrinkOut`). The expanding and shrinking will likely also
animate the parent and siblings if they rely on the size of appearing/disappearing content. When
the `AnimatedVisibility` composable is put in a `Row` or a `Column`, the default enter and exit
transitions are tailored to that particular container. See `RowScope.AnimatedVisibility` and
`ColumnScope.AnimatedVisibility` for details.

Here are two examples of `AnimatedVisibility`: one using the built-in enter/exit transition, the
other using a custom enter/exit animation.


The example blow shows how a custom enter/exit animation can be created using the Transition
object (i.e. Transition<EnterExitState>) from `AnimatedVisibilityScope`.

#### Parameters

| | |
| --- | --- |
| visible | defines whether the content should be visible |
| modifier | modifier for the `Layout` created to contain the `content` |
| enter | EnterTransition(s) used for the appearing animation, fading in while expanding by default |
| exit | ExitTransition(s) used for the disappearing animation, fading out while shrinking by default |
| label | A label to differentiate from other animations in Android Studio animation preview. |
| content | Content to appear or disappear based on the value of `visible` |


<hr class="docs-overload-divider">


<h2 id="animatedvisibility-visible-modifier-enter-exit-label-content-2">AnimatedVisibility</h2>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
public fun RowScope.AnimatedVisibility(
    visible: Boolean,
    modifier: Modifier = Modifier,
    enter: EnterTransition = fadeIn() + expandHorizontally(),
    exit: ExitTransition = fadeOut() + shrinkHorizontally(),
    label: String = "AnimatedVisibility",
    content: @Composable() AnimatedVisibilityScope.() -> Unit,
)
```


`RowScope.AnimatedVisibility` composable animates the appearance and disappearance of its content
when the `AnimatedVisibility` is in a `Row`. The default animations are tailored specific to the
`Row` layout. See more details below.

Different `EnterTransition`s and `ExitTransition`s can be defined in `enter` and `exit` 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.

The default `enter` and `exit` transition is configured based on the horizontal layout of a
`Row`. `enter` defaults to a combination of fading in and expanding the content horizontally.
(The end of the content will be the leading edge as the content expands to its full width.) And
`exit` defaults to shrinking the content horizontally with the end of the content being the
leading edge while fading out. The expanding and shrinking will likely also animate the parent
and siblings in the row since they rely on the size of appearing/disappearing content.

Aside from these three types of `EnterTransition` and `ExitTransition`, `AnimatedVisibility` also
supports custom enter/exit animations. Some use cases may benefit from custom enter/exit
animations on shape, scale, color, etc. Custom enter/exit animations can be created using the
`Transition<EnterExitState>` object from the `AnimatedVisibilityScope` (i.e.
`AnimatedVisibilityScope.transition`). See `EnterExitState` for an example of custom animations.
These custom animations will be running along side of the built-in animations specified in
`enter` and `exit`. In cases where the enter/exit animation needs to be completely customized,
`enter` and/or `exit` can be specified as `EnterTransition.None` and/or `ExitTransition.None` as
needed. `AnimatedVisibility` will wait until *all* of enter/exit animations to finish before it
considers itself idle. `content` will only be removed after all the (built-in and custom) exit
animations have finished.

`AnimatedVisibility` creates a custom `Layout` for its content. The size of the custom layout is
determined by the largest width and largest height of the children. All children will be aligned
to the top start of the `Layout`.

__Note__: Once the exit transition is finished, the `content` composable will be removed from the
tree, and disposed. If there's a need to observe the state change of the enter/exit transition
and follow up additional action (e.g. remove data, sequential animation, etc), consider the
AnimatedVisibility API variant that takes a `MutableTransitionState` parameter.

Here's an example of using `RowScope.AnimatedVisibility` in a `Row`:

#### Parameters

| | |
| --- | --- |
| visible | defines whether the content should be visible |
| modifier | modifier for the `Layout` created to contain the `content` |
| enter | EnterTransition(s) used for the appearing animation, fading in while expanding horizontally by default |
| exit | ExitTransition(s) used for the disappearing animation, fading out while shrinking horizontally by default |
| label | A label to differentiate from other animations in Android Studio animation preview. |
| content | Content to appear or disappear based on the value of `visible` |


<hr class="docs-overload-divider">


<h2 id="animatedvisibility-visible-modifier-enter-exit-label-content-3">AnimatedVisibility</h2>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
public fun ColumnScope.AnimatedVisibility(
    visible: Boolean,
    modifier: Modifier = Modifier,
    enter: EnterTransition = fadeIn() + expandVertically(),
    exit: ExitTransition = fadeOut() + shrinkVertically(),
    label: String = "AnimatedVisibility",
    content: @Composable AnimatedVisibilityScope.() -> Unit,
)
```


`ColumnScope.AnimatedVisibility` composable animates the appearance and disappearance of its
content when the `AnimatedVisibility` is in a `Column`. The default animations are tailored
specific to the `Column` layout. See more details below.

Different `EnterTransition`s and `ExitTransition`s can be defined in `enter` and `exit` 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.

The default `enter` and `exit` transition is configured based on the vertical layout of a
`Column`. `enter` defaults to a combination of fading in and expanding the content vertically.
(The bottom of the content will be the leading edge as the content expands to its full height.)
And the `exit` defaults to shrinking the content vertically with the bottom of the content being
the leading edge while fading out. The expanding and shrinking will likely also animate the
parent and siblings in the column since they rely on the size of appearing/disappearing content.

Aside from these three types of `EnterTransition` and `ExitTransition`, `AnimatedVisibility` also
supports custom enter/exit animations. Some use cases may benefit from custom enter/exit
animations on shape, scale, color, etc. Custom enter/exit animations can be created using the
`Transition<EnterExitState>` object from the `AnimatedVisibilityScope` (i.e.
`AnimatedVisibilityScope.transition`). See `EnterExitState` for an example of custom animations.
These custom animations will be running along side of the built-in animations specified in
`enter` and `exit`. In cases where the enter/exit animation needs to be completely customized,
`enter` and/or `exit` can be specified as `EnterTransition.None` and/or `ExitTransition.None` as
needed. `AnimatedVisibility` will wait until *all* of enter/exit animations to finish before it
considers itself idle. `content` will only be removed after all the (built-in and custom) exit
animations have finished.

`AnimatedVisibility` creates a custom `Layout` for its content. The size of the custom layout is
determined by the largest width and largest height of the children. All children will be aligned
to the top start of the `Layout`.

__Note__: Once the exit transition is finished, the `content` composable will be removed from the
tree, and disposed. If there's a need to observe the state change of the enter/exit transition
and follow up additional action (e.g. remove data, sequential animation, etc), consider the
AnimatedVisibility API variant that takes a `MutableTransitionState` parameter.

Here's an example of using `ColumnScope.AnimatedVisibility` in a `Column`:

#### Parameters

| | |
| --- | --- |
| visible | defines whether the content should be visible |
| modifier | modifier for the `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 |
| label | A label to differentiate from other animations in Android Studio animation preview. |
| content | Content to appear or disappear based on the value of `visible` |


<hr class="docs-overload-divider">


<h2 id="animatedvisibility-visiblestate-modifier-enter-exit-label-content">AnimatedVisibility</h2>

<div class='sourceset sourceset-common'>Common</div>


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


`AnimatedVisibility` composable animates the appearance and disappearance of its content, as
`visibleState`'s `targetState` changes. The `visibleState`
can also be used to observe the state of `AnimatedVisibility`. For example: `visibleState.isIdle`
indicates whether all the animations have finished in `AnimatedVisibility`, and
`visibleState.currentState` returns the initial state of the current animations.

Different `EnterTransition`s and `ExitTransition`s can be defined in `enter` and `exit` 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.

Aside from these three types of `EnterTransition` and `ExitTransition`, `AnimatedVisibility` also
supports custom enter/exit animations. Some use cases may benefit from custom enter/exit
animations on shape, scale, color, etc. Custom enter/exit animations can be created using the
`Transition<EnterExitState>` object from the `AnimatedVisibilityScope` (i.e.
`AnimatedVisibilityScope.transition`). See `EnterExitState` for an example of custom animations.
These custom animations will be running along side of the built-in animations specified in
`enter` and `exit`. In cases where the enter/exit animation needs to be completely customized,
`enter` and/or `exit` can be specified as `EnterTransition.None` and/or `ExitTransition.None` as
needed. `AnimatedVisibility` will wait until *all* of enter/exit animations to finish before it
considers itself idle. `content` will only be removed after all the (built-in and custom) exit
animations have finished.

`AnimatedVisibility` creates a custom `Layout` for its content. The size of the custom layout is
determined by the largest width and largest height of the children. All children will be aligned
to the top start of the `Layout`.

__Note__: Once the exit transition is finished, the `content` composable will be removed from the
tree, and disposed. Both `currentState` and `targetState` will be `false` for `visibleState`.

By default, the enter transition will be a combination of `fadeIn` and `expandIn` of the content
from the bottom end. And the exit transition will be shrinking the content towards the bottom end
while fading out (i.e. `fadeOut` + `shrinkOut`). The expanding and shrinking will likely also
animate the parent and siblings if they rely on the size of appearing/disappearing content. When
the `AnimatedVisibility` composable is put in a `Row` or a `Column`, the default enter and exit
transitions are tailored to that particular container. See `RowScope.AnimatedVisibility` and
`ColumnScope.AnimatedVisibility` for details.

#### Parameters

| | |
| --- | --- |
| visibleState | defines whether the content should be visible |
| modifier | modifier for the `Layout` created to contain the `content` |
| enter | EnterTransition(s) used for the appearing animation, fading in while expanding by default |
| exit | ExitTransition(s) used for the disappearing animation, fading out while shrinking by default |
| label | A label to differentiate from other animations in Android Studio animation preview. |
| content | Content to appear or disappear based on the value of `visibleState` |


<hr class="docs-overload-divider">


<h2 id="animatedvisibility-visiblestate-modifier-enter-exit-label-content-2">AnimatedVisibility</h2>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
public fun RowScope.AnimatedVisibility(
    visibleState: MutableTransitionState<Boolean>,
    modifier: Modifier = Modifier,
    enter: EnterTransition = expandHorizontally() + fadeIn(),
    exit: ExitTransition = shrinkHorizontally() + fadeOut(),
    label: String = "AnimatedVisibility",
    content: @Composable() AnimatedVisibilityScope.() -> Unit,
)
```


`RowScope.AnimatedVisibility` composable animates the appearance and disappearance of its content
as `visibleState`'s `targetState` changes. The default
`enter` and `exit` transitions are tailored specific to the `Row` layout. See more details below.
The `visibleState` can also be used to observe the state of `AnimatedVisibility`. For example:
`visibleState.isIdle` indicates whether all the animations have finished in `AnimatedVisibility`,
and `visibleState.currentState` returns the initial state of the current animations.

Different `EnterTransition`s and `ExitTransition`s can be defined in `enter` and `exit` 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.

The default `enter` and `exit` transition is configured based on the horizontal layout of a
`Row`. `enter` defaults to a combination of fading in and expanding the content horizontally.
(The end of the content will be the leading edge as the content expands to its full width.) And
`exit` defaults to shrinking the content horizontally with the end of the content being the
leading edge while fading out. The expanding and shrinking will likely also animate the parent
and siblings in the row since they rely on the size of appearing/disappearing content.

Aside from these three types of `EnterTransition` and `ExitTransition`, `AnimatedVisibility` also
supports custom enter/exit animations. Some use cases may benefit from custom enter/exit
animations on shape, scale, color, etc. Custom enter/exit animations can be created using the
`Transition<EnterExitState>` object from the `AnimatedVisibilityScope` (i.e.
`AnimatedVisibilityScope.transition`). See `EnterExitState` for an example of custom animations.
These custom animations will be running along side of the built-in animations specified in
`enter` and `exit`. In cases where the enter/exit animation needs to be completely customized,
`enter` and/or `exit` can be specified as `EnterTransition.None` and/or `ExitTransition.None` as
needed. `AnimatedVisibility` will wait until *all* of enter/exit animations to finish before it
considers itself idle. `content` will only be removed after all the (built-in and custom) exit
animations have finished.

`AnimatedVisibility` creates a custom `Layout` for its content. The size of the custom layout is
determined by the largest width and largest height of the children. All children will be aligned
to the top start of the `Layout`.

__Note__: Once the exit transition is finished, the `content` composable will be removed from the
tree, and disposed. Both `currentState` and `targetState` will be `false` for `visibleState`.

#### Parameters

| | |
| --- | --- |
| visibleState | defines whether the content should be visible |
| modifier | modifier for the `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 |
| label | A label to differentiate from other animations in Android Studio animation preview. |
| content | Content to appear or disappear based on the value of `visibleState` |


<hr class="docs-overload-divider">


<h2 id="animatedvisibility-visiblestate-modifier-enter-exit-label-content-3">AnimatedVisibility</h2>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
public fun ColumnScope.AnimatedVisibility(
    visibleState: MutableTransitionState<Boolean>,
    modifier: Modifier = Modifier,
    enter: EnterTransition = expandVertically() + fadeIn(),
    exit: ExitTransition = shrinkVertically() + fadeOut(),
    label: String = "AnimatedVisibility",
    content: @Composable() AnimatedVisibilityScope.() -> Unit,
)
```


`ColumnScope.AnimatedVisibility` composable animates the appearance and disappearance of its
content as `visibleState`'s `targetState` changes. The
default `enter` and `exit` transitions are tailored specific to the `Column` layout. See more
details below. The `visibleState` can also be used to observe the state of `AnimatedVisibility`.
For example: `visibleState.isIdle` indicates whether all the animations have finished in
`AnimatedVisibility`, and `visibleState.currentState` returns the initial state of the current
animations.

Different `EnterTransition`s and `ExitTransition`s can be defined in `enter` and `exit` 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.

The default `enter` and `exit` transition is configured based on the vertical layout of a
`Column`. `enter` defaults to a combination of fading in and expanding the content vertically.
(The bottom of the content will be the leading edge as the content expands to its full height.)
And the `exit` defaults to shrinking the content vertically with the bottom of the content being
the leading edge while fading out. The expanding and shrinking will likely also animate the
parent and siblings in the column since they rely on the size of appearing/disappearing content.

Aside from these three types of `EnterTransition` and `ExitTransition`, `AnimatedVisibility` also
supports custom enter/exit animations. Some use cases may benefit from custom enter/exit
animations on shape, scale, color, etc. Custom enter/exit animations can be created using the
`Transition<EnterExitState>` object from the `AnimatedVisibilityScope` (i.e.
`AnimatedVisibilityScope.transition`). See `EnterExitState` for an example of custom animations.
These custom animations will be running along side of the built-in animations specified in
`enter` and `exit`. In cases where the enter/exit animation needs to be completely customized,
`enter` and/or `exit` can be specified as `EnterTransition.None` and/or `ExitTransition.None` as
needed. `AnimatedVisibility` will wait until *all* of enter/exit animations to finish before it
considers itself idle. `content` will only be removed after all the (built-in and custom) exit
animations have finished.

`AnimatedVisibility` creates a custom `Layout` for its content. The size of the custom layout is
determined by the largest width and largest height of the children. All children will be aligned
to the top start of the `Layout`.

__Note__: Once the exit transition is finished, the `content` composable will be removed from the
tree, and disposed. Both `currentState` and `targetState` will be `false` for `visibleState`.

#### Parameters

| | |
| --- | --- |
| visibleState | defines whether the content should be visible |
| modifier | modifier for the `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 |
| label | A label to differentiate from other animations in Android Studio animation preview. |
| content | Content to appear or disappear based on of `visibleState` |


<hr class="docs-overload-divider">


<h2 id="animatedvisibility-visible-modifier-enter-exit-content">AnimatedVisibility</h2>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
public fun <T> Transition<T>.AnimatedVisibility(
    visible: (T) -> Boolean,
    modifier: Modifier = Modifier,
    enter: EnterTransition = fadeIn() + expandIn(),
    exit: ExitTransition = shrinkOut() + fadeOut(),
    content: @Composable() AnimatedVisibilityScope.() -> Unit,
): Unit
```


This extension function creates an `AnimatedVisibility` composable as a child Transition of the
given Transition. This means: 1) the enter/exit transition is now triggered by the provided
`Transition`'s `targetState` change. When the targetState changes, the
visibility will be derived using the `visible` lambda and `Transition.targetState`. 2) The
enter/exit transitions, as well as any custom enter/exit animations defined in
`AnimatedVisibility` are now hoisted to the parent Transition. The parent Transition will wait
for all of them to finish before it considers itself finished (i.e. `Transition.currentState` =
`Transition.targetState`), and subsequently removes the content in the exit case.

Different `EnterTransition`s and `ExitTransition`s can be defined in `enter` and `exit` 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.

Aside from these three types of `EnterTransition` and `ExitTransition`, `AnimatedVisibility` also
supports custom enter/exit animations. Some use cases may benefit from custom enter/exit
animations on shape, scale, color, etc. Custom enter/exit animations can be created using the
`Transition<EnterExitState>` object from the `AnimatedVisibilityScope` (i.e.
`AnimatedVisibilityScope.transition`). See `EnterExitState` for an example of custom animations.
These custom animations will be running along side of the built-in animations specified in
`enter` and `exit`. In cases where the enter/exit animation needs to be completely customized,
`enter` and/or `exit` can be specified as `EnterTransition.None` and/or `ExitTransition.None` as
needed. `AnimatedVisibility` will wait until *all* of enter/exit animations to finish before it
considers itself idle. `content` will only be removed after all the (built-in and custom) exit
animations have finished.

`AnimatedVisibility` creates a custom `Layout` for its content. The size of the custom layout is
determined by the largest width and largest height of the children. All children will be aligned
to the top start of the `Layout`.

__Note__: Once the exit transition is finished, the `content` composable will be removed from the
tree, and disposed.

By default, the enter transition will be a combination of `fadeIn` and `expandIn` of the content
from the bottom end. And the exit transition will be shrinking the content towards the bottom end
while fading out (i.e. `fadeOut` + `shrinkOut`). The expanding and shrinking will likely also
animate the parent and siblings if they rely on the size of appearing/disappearing content.

#### Parameters

| | |
| --- | --- |
| visible | defines whether the content should be visible based on transition state T |
| modifier | modifier for the `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 |
| content | Content to appear or disappear based on the visibility derived from the `Transition.targetState` and the provided `visible` lambda |