# androidx.compose.animation

Common/AllAndroid/JVM

In this page, you'll find documentation for types, properties, and functions available in the `androidx.compose.animation` package. For example:

- Animation APIs such as `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#Animatable(androidx.compose.ui.graphics.Color)`, `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)`, and `https://developer.android.com/reference/kotlin/androidx/compose/animation/animateContentSize.modifier#(androidx.compose.ui.Modifier).animateContentSize(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function2)`.

- Enter/exit animation APIs such as `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)`, and `https://developer.android.com/reference/kotlin/androidx/compose/animation/Crossfade.composable#Crossfade(kotlin.Any,androidx.compose.ui.Modifier,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.String,kotlin.Function1)`.

If you're looking for guidance instead, check out the [Animations in Compose guide](https://developer.android.com/jetpack/compose/animation).

## Interfaces

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedContentScope` | Receiver scope for content lambda for AnimatedContent. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedContentTransitionScope` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedContentTransitionScope` provides functions that are convenient and only applicable in the context of `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedContent.composable#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.String,kotlin.Function1,kotlin.Function2)`, such as `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedContentTransitionScope#slideIntoContainer(androidx.compose.animation.AnimatedContentTransitionScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedContentTransitionScope#slideOutOfContainer(androidx.compose.animation.AnimatedContentTransitionScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` | 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)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/BoundsTransform` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/BoundsTransform` defines the animation spec used to animate from initial bounds to the target bounds. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope` provides a coordinator space in which shared elements/ shared bounds (when matched) will transform their bounds from one to another. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.OverlayClip` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.OverlayClip` defines a specific clipping that should be applied to a `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` or `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElement(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` in the overlay. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.PlaceholderSize` | PlaceholderSize defines the size of the space that was or will be occupied by the exiting or entering `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElement(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)`/`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode` | There are two different modes to resize child layout of `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` during bounds transform: 1) `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)` and 2) `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#RemeasureToBounds()`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig` allows a shared element to be disabled or enabled dynamically through `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig#(androidx.compose.animation.SharedTransitionScope.SharedContentState).isEnabled()` property. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SizeTransform` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SizeTransform` defines how to transform from one size to another when the size of the content changes. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/TransformScope` | Scope for manually manipulating the visual transformation of content during the deferred phase of a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/DeferredTransition`. | Cmn |

## Classes

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedContentTransitionScope.SlideDirection` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedContentTransitionScope.SlideDirection` defines the direction of the slide in/out for `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedContentTransitionScope#slideIntoContainer(androidx.compose.animation.AnimatedContentTransitionScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedContentTransitionScope#slideOutOfContainer(androidx.compose.animation.AnimatedContentTransitionScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ChangeSizeConfig` | Configuration parameters for the size change (expand/shrink) effect of an `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` or `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform` defines how the target content (i.e. content associated with target state) enters `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedContent.composable#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.String,kotlin.Function1,kotlin.Function2)` and how the initial content disappears. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterExitTransitionConfig` | Configurations for all transitions within an `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` or `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` defines how an `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)` Composable appears on screen as it becomes visible. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` defines how an `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)` Composable disappears on screen as it becomes not visible. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/FadeConfig` | Configuration parameters for the fade effect of an `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` or `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/MutableContentTransform` | An object that allows manual manipulation of both entering and exiting content during the deferred phase (initiated by `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/DeferredTransitionState#defer(kotlin.Any)`) of an `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedContent.composable#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.String,kotlin.Function1,kotlin.Function2)` transition. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/MutableTransform` | An object that allows manual manipulation of the visual transformations (alpha, scale, offset, etc.) of content during the deferred phase (initiated by `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/DeferredTransitionState#defer(kotlin.Any)`) of a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/DeferredTransition` (e.g., for predictive back gestures). | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ScaleConfig` | Configuration parameters for the scale effect of an `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` or `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` is designed to allow access of the properties of `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)`/`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElement(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)`, such as whether a match of the same `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#key()` has been found in the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope`, its `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#clipPathInOverlay()` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#parentSharedContentState()` if there is a parent `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` in the layout tree. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SlideConfig` | Configuration parameters for the slide effect of an `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` or `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SplineBasedFloatDecayAnimationSpec` | A native Android fling curve decay. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/VeilConfig` | Configuration parameters for the veil effect (color overlay transition) of an `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` or `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`. | Cmn |

## Objects

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionDefaults` | Default values for `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElement(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).renderInSharedTransitionScopeOverlay(kotlin.Float,kotlin.Function0)` related configurations. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionDefaults.SharedContentConfig` | Default SharedContentConfig used in `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#rememberSharedContentState(kotlin.Any)`. | Cmn |

## Annotations

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExperimentalAnimationApi` |   | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExperimentalLookaheadAnimationVisualDebugApi` |   | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExperimentalSharedTransitionApi` |   | Cmn |

## Enums

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterExitState` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterExitState` contains the three states that are involved in the enter and exit transition 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)`. | Cmn |

## Composables

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedContent.composable` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedContent.composable#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.String,kotlin.Function1,kotlin.Function2)` is a container that automatically animates its content when `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.String,kotlin.Function1,kotlin.Function2)` changes. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable` | `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)` composable animates the appearance and disappearance of its content, as `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` value changes. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/CapturedAnimatedVisibility.composable` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/CapturedAnimatedVisibility.composable#CapturedAnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function0)` animates the appearance and disappearance of its content as `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#CapturedAnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function0)` changes. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/Crossfade.composable` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/Crossfade.composable#Crossfade(kotlin.Any,androidx.compose.ui.Modifier,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.String,kotlin.Function1)` allows to switch between two layouts with a crossfade animation. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/CustomizedLookaheadAnimationVisualDebugging.composable` | Allows customizing a particular shared element or animated bounds animation for debugging. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/DeferredAnimatedContent.composable` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedContent.composable#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.String,kotlin.Function1,kotlin.Function2)` is a container that automatically animates its content when `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition#targetState()` changes. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/DeferredAnimatedVisibility.composable` | `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 be used to animate the appearance and disappearance of its content as the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition` state changes. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/LookaheadAnimationVisualDebugging.composable` | Allows enabling and customizing shared element and animated bounds animation debugging. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionLayout.composable` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionLayout.composable#SharedTransitionLayout(androidx.compose.ui.Modifier,kotlin.Function1)` creates a layout and a `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope` for the child layouts in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#SharedTransitionLayout(androidx.compose.ui.Modifier,kotlin.Function1)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.composable` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.composable#SharedTransitionScope(kotlin.Function2)` creates a `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.composable#SharedTransitionScope(kotlin.Function2)` for the child layouts in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#SharedTransitionScope(kotlin.Function2)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/animateColor.composable` | Creates a Color animation that runs infinitely as a part of the given `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/animateColorAsState.composable` | Fire-and-forget animation function for `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/defaultDecayAnimationSpec.composable` | Create default `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/DecayAnimationSpec` representing a default fling curve for a platform. | Cmn android |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/rememberSplineBasedDecay.composable` |   | Cmn android |

## Modifiers

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/animateBounds.modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to animate layout changes (position and/or size) that occur within a `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/animateContentSize.modifier` | This modifier animates its own size when its child modifier (or the child composable if it is already at the tail of the chain) changes size. | Cmn |

## Top-level functions summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Animatable<https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationVector4D>` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/annotation/RememberInComposition https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#Animatable(androidx.compose.ui.graphics.Color)(initialValue: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color)` This `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#Animatable(androidx.compose.ui.graphics.Color)` function creates a Color value holder that automatically animates its value when the value is changed via `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.AnimationState).animateTo(kotlin.Any,androidx.compose.animation.core.AnimationSpec,kotlin.Boolean,kotlin.Function1)`. | Cmn |
| `inline https://developer.android.com/reference/kotlin/androidx/compose/animation/MutableContentTransform` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#MutableContentTransform(kotlin.Boolean,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function1)( initialVeilMatchParentSize: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, targetVeilMatchParentSize: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, noinline initialOffsetVelocityProvider: (() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset)?, noinline targetOffsetVelocityProvider: (() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset)?, block: https://developer.android.com/reference/kotlin/androidx/compose/animation/MutableContentTransform.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Creates a `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#MutableContentTransform(kotlin.Boolean,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function1)` and applies the provided configuration `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#MutableContentTransform(kotlin.Boolean,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function1)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SizeTransform` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#SizeTransform(kotlin.Boolean,kotlin.Function2)( clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, sizeAnimationSpec: (initialSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize, targetSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize) -> https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize> )` This creates a `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#SizeTransform(kotlin.Boolean,kotlin.Function2)` with the provided `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#SizeTransform(kotlin.Boolean,kotlin.Function2)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#SizeTransform(kotlin.Boolean,kotlin.Function2)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)( animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize>, expandFrom: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal, clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, initialWidth: (fullWidth: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html )` This expands the clip bounds of the appearing content horizontally, from the width returned from `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)` to the full width. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)( animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize>, expandFrom: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment, clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, initialSize: (fullSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize )` This expands the clip bounds of the appearing content from the size returned from `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` to the full size. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)( animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize>, expandFrom: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical, clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, initialHeight: (fullHeight: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html )` This expands the clip bounds of the appearing content vertically, from the height returned from `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)` to the full height. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)(animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>, initialAlpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` This fades in the content of the transition, from the specified starting alpha (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)`) to 1f, using the supplied `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)(animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>, targetAlpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` This fades out the content of the transition, from full opacity to the specified target alpha (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)`), using the supplied `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)( animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>, initialScale: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, transformOrigin: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/TransformOrigin )` This scales the content as it appears, from an initial scale (defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)`) to 1f. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)( animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>, targetScale: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, transformOrigin: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/TransformOrigin )` This scales the content of the exit transition, from 1f to the target scale defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)( animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize>, shrinkTowards: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal, clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, targetWidth: (fullWidth: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html )` This shrinks the clip bounds of the disappearing content horizontally, from the full width to the width returned from `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)( animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize>, shrinkTowards: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment, clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, targetSize: (fullSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize )` This shrinks the clip bounds of the disappearing content from the full size to the size returned from `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)( animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize>, shrinkTowards: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical, clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, targetHeight: (fullHeight: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html )` This shrinks the clip bounds of the disappearing content vertically, from the full height to the height returned from `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)( animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset>, initialOffset: (fullSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset )` This slides in the content of the transition, from a starting offset defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` to `IntOffset(0, 0)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideInHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)( animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset>, initialOffsetX: (fullWidth: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html )` This slides in the content horizontally, from a starting offset defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideInHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` to `0` **pixels**. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideInVertically(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)( animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset>, initialOffsetY: (fullHeight: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html )` This slides in the content vertically, from a starting offset defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideInVertically(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` to `0` in **pixels**. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)( animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset>, targetOffset: (fullSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset )` This slides out the content of the transition, from an offset of `IntOffset(0, 0)` to the target offset defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOutHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)( animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset>, targetOffsetX: (fullWidth: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html )` This slides out the content horizontally, from 0 to a target offset defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOutHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` in **pixels**. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOutVertically(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)( animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset>, targetOffsetY: (fullHeight: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html )` This slides out the content vertically, from 0 to a target offset defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOutVertically(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` in **pixels**. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/DecayAnimationSpec<T>` | `<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#splineBasedDecay(androidx.compose.ui.unit.Density)(density: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density)` | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#unveilIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.graphics.Color,kotlin.Boolean)( animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color>, initialColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, matchParentSize: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` This animates an unveiling scrim over the content as it enters. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#veilOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.graphics.Color,kotlin.Boolean)( animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color>, targetColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, matchParentSize: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` This animates a veiling scrim over the content as it exits. | Cmn |

## Extension functions summary

|---|---|---|
| `infix https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition.https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.EnterTransition).togetherWith(androidx.compose.animation.ExitTransition)(exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition)` This creates a `https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform` using the provided `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.EnterTransition).togetherWith(androidx.compose.animation.ExitTransition)`, where the enter and exit transition will be running simultaneously. | Cmn |

## Extension properties summary

|---|---|---|
| `(colorSpace: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/colorspace/ColorSpace) -> https://developer.android.com/reference/kotlin/androidx/compose/animation/core/TwoWayConverter<https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationVector4D>` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color.Companion.https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.ui.graphics.Color.Companion).VectorConverter()` A lambda that takes a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/colorspace/ColorSpace` and returns a converter that can both convert a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` to a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationVector4D`, and convert a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationVector4D`) back to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` in the given `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/colorspace/ColorSpace`. | Cmn |

## Top-level functions

### Animatable

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/SingleValueAnimation.kt+function:Animatable) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.10.0)

```
@RememberInComposition
fun Animatable(initialValue: Color): Animatable<Color, AnimationVector4D>
```

This `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#Animatable(androidx.compose.ui.graphics.Color)` function creates a Color value holder that automatically animates its value when the value is changed via `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.AnimationState).animateTo(kotlin.Any,androidx.compose.animation.core.AnimationSpec,kotlin.Boolean,kotlin.Function1)`. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#Animatable(androidx.compose.ui.graphics.Color)` supports value change during an ongoing value change animation. When that happens, a new animation will transition `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#Animatable(androidx.compose.ui.graphics.Color)` from its current value (i.e. value at the point of interruption) to the new target. This ensures that the value change is *always* continuous using `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.AnimationState).animateTo(kotlin.Any,androidx.compose.animation.core.AnimationSpec,kotlin.Boolean,kotlin.Function1)`. If `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` animation (i.e. default animation) is used with `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.AnimationState).animateTo(kotlin.Any,androidx.compose.animation.core.AnimationSpec,kotlin.Boolean,kotlin.Function1)`, the velocity change will be guaranteed to be continuous as well.

Unlike `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationState`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#Animatable(androidx.compose.ui.graphics.Color)` ensures mutual exclusiveness on its animation. To do so, when a new animation is started via `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.AnimationState).animateTo(kotlin.Any,androidx.compose.animation.core.AnimationSpec,kotlin.Boolean,kotlin.Function1)` (or `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#animateDecay(kotlin.Float,kotlin.Float,androidx.compose.animation.core.FloatDecayAnimationSpec,kotlin.Function2)`), any ongoing animation job will be cancelled via a `https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines/-cancellation-exception/index.html`.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#Animatable(androidx.compose.ui.graphics.Color)` also supports animating data types other than `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color`, such as Floats and generic types. See `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Animatable` for other variants.

```kotlin
import androidx.compose.animation.Animatable
import androidx.compose.animation.core.AnimationSpec
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.ui.graphics.Color

@Composable
fun animate(
    targetValue: Color,
    animationSpec: AnimationSpec<Color>,
    onFinished: (Color) -> Unit,
): Color {
    // Creates an Animatable of Color, and remembers it.
    val color = remember { Animatable(targetValue) }
    val finishedListener = rememberUpdatedState(onFinished)
    // Launches a new coroutine whenever the target value or animation spec has changed. This
    // automatically cancels the previous job/animation.
    LaunchedEffect(targetValue, animationSpec) {
        color.animateTo(targetValue, animationSpec)
        // Invokes finished listener. This line will not be executed if the job gets canceled
        // halfway through an animation.
        finishedListener.value(targetValue)
    }
    return color.value
}
```

| Parameters |
|---|---|
| `initialValue: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | initial value of the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#Animatable(androidx.compose.ui.graphics.Color)` |

### MutableContentTransform

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/AnimatedContent.kt+function:MutableContentTransform) Added in [1.12.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.12.0)

```
inline fun MutableContentTransform(
    initialVeilMatchParentSize: Boolean = false,
    targetVeilMatchParentSize: Boolean = false,
    noinline initialOffsetVelocityProvider: (() -> Offset)? = null,
    noinline targetOffsetVelocityProvider: (() -> Offset)? = null,
    block: MutableContentTransform.() -> Unit = {}
): MutableContentTransform
```

Creates a `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#MutableContentTransform(kotlin.Boolean,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function1)` and applies the provided configuration `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#MutableContentTransform(kotlin.Boolean,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function1)`.

| Parameters |
|---|---|
| `initialVeilMatchParentSize: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | Whether the initial content's veil should match the parent size. |
| `targetVeilMatchParentSize: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | Whether the target content's veil should match the parent size. |
| `noinline initialOffsetVelocityProvider: (() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset)? = null` | The velocity of the offset change for the exiting content in pixels/sec. If `null`, the system will automatically calculate the velocity based on `https://developer.android.com/reference/kotlin/androidx/compose/animation/TransformScope#offset()` changes during the deferred phase. |
| `noinline targetOffsetVelocityProvider: (() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset)? = null` | The velocity of the offset change for the entering content in pixels/sec. If `null`, the system will automatically calculate the velocity based on `https://developer.android.com/reference/kotlin/androidx/compose/animation/TransformScope#offset()` changes during the deferred phase. |
| `block: https://developer.android.com/reference/kotlin/androidx/compose/animation/MutableContentTransform.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = {}` | A configuration block to set up the transformations for initial and target content. |

### SizeTransform

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/AnimatedContent.kt+function:SizeTransform) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0)

```
fun SizeTransform(
    clip: Boolean = true,
    sizeAnimationSpec: (initialSize: IntSize, targetSize: IntSize) -> FiniteAnimationSpec<IntSize> = { _, _ ->
            AnimatedContentDefaults.SizeAnimationSpec
        }
): SizeTransform
```

This creates a `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#SizeTransform(kotlin.Boolean,kotlin.Function2)` with the provided `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#SizeTransform(kotlin.Boolean,kotlin.Function2)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#SizeTransform(kotlin.Boolean,kotlin.Function2)`. By default, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#SizeTransform(kotlin.Boolean,kotlin.Function2)` will be true. This means during the size animation, the content will be clipped to the animated size. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#SizeTransform(kotlin.Boolean,kotlin.Function2)` defaults to return a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` animation.

```kotlin
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedContentTransitionScope
import androidx.compose.animation.ContentTransform
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.core.keyframes
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.togetherWith
import androidx.compose.ui.unit.IntSize

// enum class CartState { Expanded, Collapsed }
val transitionSpec: AnimatedContentTransitionScope<CartState>.() -> ContentTransform = {
    // Fade in with a delay so that it starts after fade out
    fadeIn(animationSpec = tween(150, delayMillis = 150))
        .togetherWith(fadeOut(animationSpec = tween(150)))
        .using(
            SizeTransform { initialSize, targetSize ->
                // Using different SizeTransform for different state change
                if (CartState.Collapsed isTransitioningTo CartState.Expanded) {
                    keyframes {
                        durationMillis = 500
                        // Animate to full target width and by 200px in height at 150ms
                        IntSize(targetSize.width, initialSize.height + 200) at 150
                    }
                } else {
                    keyframes {
                        durationMillis = 500
                        // Animate 1/2 the height without changing the width at 150ms.
                        // The width and rest of the height will be animated in the
                        // timeframe between 150ms and duration (i.e. 500ms)
                        IntSize(
                            initialSize.width,
                            (initialSize.height + targetSize.height) / 2,
                        ) at 150
                    }
                }
            }
        )
}
```

### expandHorizontally

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/EnterExitTransition.kt+function:expandHorizontally) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
fun expandHorizontally(
    animationSpec: FiniteAnimationSpec<IntSize> = spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntSize.VisibilityThreshold,
        ),
    expandFrom: Alignment.Horizontal = Alignment.End,
    clip: Boolean = true,
    initialWidth: (fullWidth: Int) -> Int = { 0 }
): EnterTransition
```

This expands the clip bounds of the appearing content horizontally, from the width returned from `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)` to the full width. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)` controls which part of the content gets revealed first. By default, the clip bounds animates from 0 to full width, starting from the end of the content, and expand to fully revealing the whole content.

**Note** : `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)` animates the bounds of the content. This bounds change will also result in the animation of other layouts that are dependent on this size.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)` is a lambda that takes the full width of the content and returns an initial width of the bounds of the content. This allows not only an absolute width, but also an initial width that is proportional to the content width.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)` defines whether the content outside of the animated bounds should be clipped. By default, clip is set to true, which only shows content in the animated bounds.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandHorizontally
import androidx.compose.animation.shrinkHorizontally
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible = visible,
    // Set the start width to 20 (pixels), 0 by default
    enter = expandHorizontally { 20 },
    exit =
        shrinkHorizontally(
            // Overwrites the default animation with tween for this shrink animation.
            animationSpec = tween(),
            // Shrink towards the end (i.e. right edge for LTR, left edge for RTL). The default
            // direction for the shrink is towards [Alignment.Start]
            shrinkTowards = Alignment.End,
        ) { fullWidth ->
            // Set the end width for the shrink animation to a quarter of the full width.
            fullWidth / 4
        },
) {
    // Content that needs to appear/disappear goes here:
    Box(Modifier.fillMaxWidth().requiredHeight(200.dp))
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize> = spring( stiffness = Spring.StiffnessMediumLow, visibilityThreshold = IntSize.VisibilityThreshold, )` | the animation used for the expanding animation, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default. |
| `expandFrom: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal = Alignment.End` | the starting point of the expanding bounds, `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#End()` by default. |
| `clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether the content outside of the animated bounds should be clipped, true by default |
| `initialWidth: (fullWidth: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = { 0 }` | the start width of the expanding bounds, returning 0 by default. |

### expandIn

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/EnterExitTransition.kt+function:expandIn) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
fun expandIn(
    animationSpec: FiniteAnimationSpec<IntSize> = spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntSize.VisibilityThreshold,
        ),
    expandFrom: Alignment = Alignment.BottomEnd,
    clip: Boolean = true,
    initialSize: (fullSize: IntSize) -> IntSize = { IntSize(0, 0) }
): EnterTransition
```

This expands the clip bounds of the appearing content from the size returned from `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` to the full size. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` controls which part of the content gets revealed first. By default, the clip bounds animates from `IntSize(0, 0)` to full size, starting from revealing the bottom right corner (or bottom left corner in RTL layouts) of the content, to fully revealing the entire content as the size expands.

**Note** : `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` animates the bounds of the content. This bounds change will also result in the animation of other layouts that are dependent on this size.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` is a lambda that takes the full size of the content and returns an initial size of the bounds of the content. This allows not only absolute size, but also an initial size that is proportional to the content size.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` defines whether the content outside of the animated bounds should be clipped. By default, clip is set to true, which only shows content in the animated bounds.

For expanding only horizontally or vertically, consider `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)`.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandIn
import androidx.compose.animation.shrinkOut
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible,
    enter =
        expandIn(
            // Overwrites the default spring animation with tween
            animationSpec = tween(100, easing = LinearOutSlowInEasing),
            // Overwrites the corner of the content that is first revealed
            expandFrom = Alignment.BottomStart,
        ) {
            // Overwrites the initial size to 50 pixels by 50 pixels
            IntSize(50, 50)
        },
    exit =
        shrinkOut(
            tween(100, easing = FastOutSlowInEasing),
            // Overwrites the area of the content that the shrink animation will end on. The
            // following parameters will shrink the content's clip bounds from the full size of
            // the
            // content to 1/10 of the width and 1/5 of the height. The shrinking clip bounds
            // will
            // always be aligned to the CenterStart of the full-content bounds.
            shrinkTowards = Alignment.CenterStart,
        ) { fullSize ->
            // Overwrites the target size of the shrinking animation.
            IntSize(fullSize.width / 10, fullSize.height / 5)
        },
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp))
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize> = spring( stiffness = Spring.StiffnessMediumLow, visibilityThreshold = IntSize.VisibilityThreshold, )` | the animation used for the expanding animation, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default. |
| `expandFrom: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment = Alignment.BottomEnd` | the starting point of the expanding bounds, `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#BottomEnd()` by default. |
| `clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether the content outside of the animated bounds should be clipped, true by default |
| `initialSize: (fullSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize = { IntSize(0, 0) }` | the start size of the expanding bounds, returning `IntSize(0, 0)` by default. |

### expandVertically

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/EnterExitTransition.kt+function:expandVertically) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
fun expandVertically(
    animationSpec: FiniteAnimationSpec<IntSize> = spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntSize.VisibilityThreshold,
        ),
    expandFrom: Alignment.Vertical = Alignment.Bottom,
    clip: Boolean = true,
    initialHeight: (fullHeight: Int) -> Int = { 0 }
): EnterTransition
```

This expands the clip bounds of the appearing content vertically, from the height returned from `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)` to the full height. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)` controls which part of the content gets revealed first. By default, the clip bounds animates from 0 to full height, revealing the bottom edge first, followed by the rest of the content.

**Note** : `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)` animates the bounds of the content. This bounds change will also result in the animation of other layouts that are dependent on this size.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)` is a lambda that takes the full height of the content and returns an initial height of the bounds of the content. This allows not only an absolute height, but also an initial height that is proportional to the content height.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)` defines whether the content outside of the animated bounds should be clipped. By default, clip is set to true, which only shows content in the animated bounds.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandVertically
import androidx.compose.animation.shrinkVertically
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible,
    // Sets the initial height of the content to 20, revealing only the top of the content at
    // the beginning of the expanding animation.
    enter = expandVertically(expandFrom = Alignment.Top) { 20 },
    // Shrinks the content to half of its full height via an animation.
    exit = shrinkVertically(animationSpec = tween()) { fullHeight -> fullHeight / 2 },
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp))
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize> = spring( stiffness = Spring.StiffnessMediumLow, visibilityThreshold = IntSize.VisibilityThreshold, )` | the animation used for the expanding animation, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default. |
| `expandFrom: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical = Alignment.Bottom` | the starting point of the expanding bounds, `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#Bottom()` by default. |
| `clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether the content outside of the animated bounds should be clipped, true by default |
| `initialHeight: (fullHeight: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = { 0 }` | the start height of the expanding bounds, returning 0 by default. |

### fadeIn

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/EnterExitTransition.kt+function:fadeIn) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
fun fadeIn(
    animationSpec: FiniteAnimationSpec<Float> = spring(stiffness = Spring.StiffnessMediumLow),
    initialAlpha: Float = 0.0f
): EnterTransition
```

This fades in the content of the transition, from the specified starting alpha (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)`) to 1f, using the supplied `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)`. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` defaults to 0f, and `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` is used by default.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible = visible,
    enter =
        fadeIn(
            // Overwrites the initial value of alpha to 0.4f for fade in, 0 by default
            initialAlpha = 0.4f
        ),
    exit =
        fadeOut(
            // Overwrites the default animation with tween
            animationSpec = tween(durationMillis = 250)
        ),
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp))
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html> = spring(stiffness = Spring.StiffnessMediumLow)` | the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec` for this animation, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default |
| `initialAlpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | the starting alpha of the enter transition, 0f by default |

### fadeOut

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/EnterExitTransition.kt+function:fadeOut) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
fun fadeOut(
    animationSpec: FiniteAnimationSpec<Float> = spring(stiffness = Spring.StiffnessMediumLow),
    targetAlpha: Float = 0.0f
): ExitTransition
```

This fades out the content of the transition, from full opacity to the specified target alpha (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)`), using the supplied `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)`. By default, the content will be faded out to fully transparent (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` defaults to 0), and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` uses `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible = visible,
    enter =
        fadeIn(
            // Overwrites the initial value of alpha to 0.4f for fade in, 0 by default
            initialAlpha = 0.4f
        ),
    exit =
        fadeOut(
            // Overwrites the default animation with tween
            animationSpec = tween(durationMillis = 250)
        ),
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp))
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html> = spring(stiffness = Spring.StiffnessMediumLow)` | the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec` for this animation, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default |
| `targetAlpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | the target alpha of the exit transition, 0f by default |

### scaleIn

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/EnterExitTransition.kt+function:scaleIn) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.10.0)

```
fun scaleIn(
    animationSpec: FiniteAnimationSpec<Float> = DefaultScaleSpring,
    initialScale: Float = 0.0f,
    transformOrigin: TransformOrigin = TransformOrigin.Center
): EnterTransition
```

This scales the content as it appears, from an initial scale (defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)`) to 1f. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)` defines the pivot point in terms of fraction of the overall size. `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/TransformOrigin#Center()` by default. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)` can be used in combination with any other type of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` using the plus operator (e.g. `scaleIn() + slideInHorizontally()`)

Note: Scale is applied **before** slide. This means when using `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`/`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` with `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)`/`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)`, the amount of scaling needs to be taken into account when sliding.

The scaling will change the visual of the content, but will **not** affect the layout size. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)` can be combined with `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)`/`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)`/`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)` to coordinate layout size change while scaling. For example:

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExitTransition
import androidx.compose.animation.expandIn
import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.animation.shrinkOut
import androidx.compose.animation.shrinkVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TransformOrigin
import androidx.compose.ui.unit.dp

Column {
    var showRed by remember { mutableStateOf(true) }
    var showGreen by remember { mutableStateOf(true) }

    AnimatedVisibility(
        visible = showGreen,
        // By Default, `scaleIn` uses the center as its pivot point. When used with a vertical
        // expansion from the vertical center, the content will be growing from the center of
        // the vertically expanding layout.
        enter = scaleIn() + expandVertically(expandFrom = Alignment.CenterVertically),
        // By Default, `scaleOut` uses the center as its pivot point. When used with an
        // ExitTransition that shrinks towards the center, the content will be shrinking both
        // in terms of scale and layout size towards the center.
        exit = scaleOut() + shrinkVertically(shrinkTowards = Alignment.CenterVertically),
    ) {
        Box(
            Modifier.size(100.dp)
                .background(color = Color.Green, shape = RoundedCornerShape(20.dp))
        )
    }

    AnimatedVisibility(
        visible = showRed,
        // Scale up from the TopLeft by setting TransformOrigin to (0f, 0f), while expanding the
        // layout size from Top start and fading. This will create a coherent look as if the
        // scale is impacting the size.
        enter =
            scaleIn(transformOrigin = TransformOrigin(0f, 0f)) +
                fadeIn() +
                expandIn(expandFrom = Alignment.TopStart),
        // Scale down from the TopLeft by setting TransformOrigin to (0f, 0f), while shrinking
        // the layout towards Top start and fading. This will create a coherent look as if the
        // scale is impacting the layout size.
        exit =
            scaleOut(transformOrigin = TransformOrigin(0f, 0f)) +
                fadeOut() +
                shrinkOut(shrinkTowards = Alignment.TopStart),
    ) {
        Box(
            Modifier.size(100.dp)
                .background(color = Color.Red, shape = RoundedCornerShape(20.dp))
        )
    }
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html> = DefaultScaleSpring` | the animation used for the scale-out, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default. |
| `initialScale: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | the initial scale for the enter transition, 0 by default. |
| `transformOrigin: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/TransformOrigin = TransformOrigin.Center` | the pivot point in terms of fraction of the overall size. By default it's `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/TransformOrigin#Center()`. |

### scaleOut

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/EnterExitTransition.kt+function:scaleOut) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.10.0)

```
fun scaleOut(
    animationSpec: FiniteAnimationSpec<Float> = DefaultScaleSpring,
    targetScale: Float = 0.0f,
    transformOrigin: TransformOrigin = TransformOrigin.Center
): ExitTransition
```

This scales the content of the exit transition, from 1f to the target scale defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)`. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)` defines the pivot point in terms of fraction of the overall size. By default it's `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/TransformOrigin#Center()`. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)` can be used in combination with any other type of `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` using the plus operator (e.g. `scaleOut() + fadeOut()`)

Note: Scale is applied **before** slide. This means when using `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`/`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` with `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)`/`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)`, the amount of scaling needs to be taken into account when sliding.

The scaling will change the visual of the content, but will **not** affect the layout size. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)` can be combined with `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)`/`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)`/`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)` for coordinated layout size change animation. For example:

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExitTransition
import androidx.compose.animation.expandIn
import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.animation.shrinkOut
import androidx.compose.animation.shrinkVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TransformOrigin
import androidx.compose.ui.unit.dp

Column {
    var showRed by remember { mutableStateOf(true) }
    var showGreen by remember { mutableStateOf(true) }

    AnimatedVisibility(
        visible = showGreen,
        // By Default, `scaleIn` uses the center as its pivot point. When used with a vertical
        // expansion from the vertical center, the content will be growing from the center of
        // the vertically expanding layout.
        enter = scaleIn() + expandVertically(expandFrom = Alignment.CenterVertically),
        // By Default, `scaleOut` uses the center as its pivot point. When used with an
        // ExitTransition that shrinks towards the center, the content will be shrinking both
        // in terms of scale and layout size towards the center.
        exit = scaleOut() + shrinkVertically(shrinkTowards = Alignment.CenterVertically),
    ) {
        Box(
            Modifier.size(100.dp)
                .background(color = Color.Green, shape = RoundedCornerShape(20.dp))
        )
    }

    AnimatedVisibility(
        visible = showRed,
        // Scale up from the TopLeft by setting TransformOrigin to (0f, 0f), while expanding the
        // layout size from Top start and fading. This will create a coherent look as if the
        // scale is impacting the size.
        enter =
            scaleIn(transformOrigin = TransformOrigin(0f, 0f)) +
                fadeIn() +
                expandIn(expandFrom = Alignment.TopStart),
        // Scale down from the TopLeft by setting TransformOrigin to (0f, 0f), while shrinking
        // the layout towards Top start and fading. This will create a coherent look as if the
        // scale is impacting the layout size.
        exit =
            scaleOut(transformOrigin = TransformOrigin(0f, 0f)) +
                fadeOut() +
                shrinkOut(shrinkTowards = Alignment.TopStart),
    ) {
        Box(
            Modifier.size(100.dp)
                .background(color = Color.Red, shape = RoundedCornerShape(20.dp))
        )
    }
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html> = DefaultScaleSpring` | the animation used for the slide-out, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default. |
| `targetScale: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | the target scale for the exit transition, 0 by default. |
| `transformOrigin: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/TransformOrigin = TransformOrigin.Center` | the pivot point in terms of fraction of the overall size. By default it's `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/TransformOrigin#Center()`. |

### shrinkHorizontally

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/EnterExitTransition.kt+function:shrinkHorizontally) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
fun shrinkHorizontally(
    animationSpec: FiniteAnimationSpec<IntSize> = spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntSize.VisibilityThreshold,
        ),
    shrinkTowards: Alignment.Horizontal = Alignment.End,
    clip: Boolean = true,
    targetWidth: (fullWidth: Int) -> Int = { 0 }
): ExitTransition
```

This shrinks the clip bounds of the disappearing content horizontally, from the full width to the width returned from `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)`. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)` controls the direction of the bounds shrink animation. By default, the clip bounds animates from full width to 0, shrinking towards the end of the content.

**Note** : `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)` animates the bounds of the content. This bounds change will also result in the animation of other layouts that are dependent on this size.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)` is a lambda that takes the full width of the content and returns a target width of the content. This allows not only absolute width, but also a target width that is proportional to the content width.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)` defines whether the content outside of the animated bounds should be clipped. By default, clip is set to true, which only shows content in the animated bounds.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandHorizontally
import androidx.compose.animation.shrinkHorizontally
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible = visible,
    // Set the start width to 20 (pixels), 0 by default
    enter = expandHorizontally { 20 },
    exit =
        shrinkHorizontally(
            // Overwrites the default animation with tween for this shrink animation.
            animationSpec = tween(),
            // Shrink towards the end (i.e. right edge for LTR, left edge for RTL). The default
            // direction for the shrink is towards [Alignment.Start]
            shrinkTowards = Alignment.End,
        ) { fullWidth ->
            // Set the end width for the shrink animation to a quarter of the full width.
            fullWidth / 4
        },
) {
    // Content that needs to appear/disappear goes here:
    Box(Modifier.fillMaxWidth().requiredHeight(200.dp))
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize> = spring( stiffness = Spring.StiffnessMediumLow, visibilityThreshold = IntSize.VisibilityThreshold, )` | the animation used for the shrinking animation, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default. |
| `shrinkTowards: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal = Alignment.End` | the ending point of the shrinking bounds, `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#End()` by default. |
| `clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether the content outside of the animated bounds should be clipped, true by default |
| `targetWidth: (fullWidth: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = { 0 }` | returns the end width of the shrinking bounds, 0 by default. |

### shrinkOut

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/EnterExitTransition.kt+function:shrinkOut) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
fun shrinkOut(
    animationSpec: FiniteAnimationSpec<IntSize> = spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntSize.VisibilityThreshold,
        ),
    shrinkTowards: Alignment = Alignment.BottomEnd,
    clip: Boolean = true,
    targetSize: (fullSize: IntSize) -> IntSize = { IntSize(0, 0) }
): ExitTransition
```

This shrinks the clip bounds of the disappearing content from the full size to the size returned from `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)`. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` controls the direction of the bounds shrink animation. By default, the clip bounds animates from full size to `IntSize(0, 0)`, shrinking towards the the bottom right corner (or bottom left corner in RTL layouts) of the content.

**Note** : `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` animates the bounds of the content. This bounds change will also result in the animation of other layouts that are dependent on this size.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` is a lambda that takes the full size of the content and returns a target size of the bounds of the content. This allows not only absolute size, but also a target size that is proportional to the content size.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` defines whether the content outside of the animated bounds should be clipped. By default, clip is set to true, which only shows content in the animated bounds.

For shrinking only horizontally or vertically, consider `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)`.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandIn
import androidx.compose.animation.shrinkOut
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible,
    enter =
        expandIn(
            // Overwrites the default spring animation with tween
            animationSpec = tween(100, easing = LinearOutSlowInEasing),
            // Overwrites the corner of the content that is first revealed
            expandFrom = Alignment.BottomStart,
        ) {
            // Overwrites the initial size to 50 pixels by 50 pixels
            IntSize(50, 50)
        },
    exit =
        shrinkOut(
            tween(100, easing = FastOutSlowInEasing),
            // Overwrites the area of the content that the shrink animation will end on. The
            // following parameters will shrink the content's clip bounds from the full size of
            // the
            // content to 1/10 of the width and 1/5 of the height. The shrinking clip bounds
            // will
            // always be aligned to the CenterStart of the full-content bounds.
            shrinkTowards = Alignment.CenterStart,
        ) { fullSize ->
            // Overwrites the target size of the shrinking animation.
            IntSize(fullSize.width / 10, fullSize.height / 5)
        },
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp))
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize> = spring( stiffness = Spring.StiffnessMediumLow, visibilityThreshold = IntSize.VisibilityThreshold, )` | the animation used for the shrinking animation, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default. |
| `shrinkTowards: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment = Alignment.BottomEnd` | the ending point of the shrinking bounds, `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#BottomEnd()` by default. |
| `clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether the content outside of the animated bounds should be clipped, true by default |
| `targetSize: (fullSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize = { IntSize(0, 0) }` | returns the end size of the shrinking bounds, `IntSize(0, 0)` by default. |

### shrinkVertically

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/EnterExitTransition.kt+function:shrinkVertically) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
fun shrinkVertically(
    animationSpec: FiniteAnimationSpec<IntSize> = spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntSize.VisibilityThreshold,
        ),
    shrinkTowards: Alignment.Vertical = Alignment.Bottom,
    clip: Boolean = true,
    targetHeight: (fullHeight: Int) -> Int = { 0 }
): ExitTransition
```

This shrinks the clip bounds of the disappearing content vertically, from the full height to the height returned from `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)`. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)` controls the direction of the bounds shrink animation. By default, the clip bounds animates from full height to 0, shrinking towards the bottom of the content.

**Note** : `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)` animates the bounds of the content. This bounds change will also result in the animation of other layouts that are dependent on this size.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)` is a lambda that takes the full height of the content and returns a target height of the content. This allows not only absolute height, but also a target height that is proportional to the content height.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)` defines whether the content outside of the animated bounds should be clipped. By default, clip is set to true, which only shows content in the animated bounds.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandVertically
import androidx.compose.animation.shrinkVertically
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible,
    // Sets the initial height of the content to 20, revealing only the top of the content at
    // the beginning of the expanding animation.
    enter = expandVertically(expandFrom = Alignment.Top) { 20 },
    // Shrinks the content to half of its full height via an animation.
    exit = shrinkVertically(animationSpec = tween()) { fullHeight -> fullHeight / 2 },
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp))
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize> = spring( stiffness = Spring.StiffnessMediumLow, visibilityThreshold = IntSize.VisibilityThreshold, )` | the animation used for the shrinking animation, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default. |
| `shrinkTowards: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical = Alignment.Bottom` | the ending point of the shrinking bounds, `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#Bottom()` by default. |
| `clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether the content outside of the animated bounds should be clipped, true by default |
| `targetHeight: (fullHeight: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = { 0 }` | returns the end height of the shrinking bounds, 0 by default. |

### slideIn

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/EnterExitTransition.kt+function:slideIn) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
fun slideIn(
    animationSpec: FiniteAnimationSpec<IntOffset> = spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntOffset.VisibilityThreshold,
        ),
    initialOffset: (fullSize: IntSize) -> IntOffset
): EnterTransition
```

This slides in the content of the transition, from a starting offset defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` to `IntOffset(0, 0)`. The direction of the slide can be controlled by configuring the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`. A positive x value means sliding from right to left, whereas a negative x value will slide the content to the right. Similarly positive and negative y values correspond to sliding up and down, respectively.

If the sliding is only desired horizontally or vertically, instead of along both axis, consider using `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideInHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` or `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideInVertically(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` is a lambda that takes the full size of the content and returns an offset. This allows the offset to be defined proportional to the full size, or as an absolute value.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.tween
import androidx.compose.animation.slideIn
import androidx.compose.animation.slideOut
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible,
    enter =
        slideIn(tween(100, easing = LinearOutSlowInEasing)) { fullSize ->
            // Specifies the starting offset of the slide-in to be 1/4 of the width to the
            // right,
            // 100 (pixels) below the content position, which results in a simultaneous slide up
            // and slide left.
            IntOffset(fullSize.width / 4, 100)
        },
    exit =
        slideOut(tween(100, easing = FastOutSlowInEasing)) {
            // The offset can be entirely independent of the size of the content. This specifies
            // a target offset 180 pixels to the left of the content, and 50 pixels below. This
            // will
            // produce a slide-left combined with a slide-down.
            IntOffset(-180, 50)
        },
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp))
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset> = spring( stiffness = Spring.StiffnessMediumLow, visibilityThreshold = IntOffset.VisibilityThreshold, )` | the animation used for the slide-in, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default. |
| `initialOffset: (fullSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset` | a lambda that takes the full size of the content and returns the initial offset for the slide-in |

### slideInHorizontally

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/EnterExitTransition.kt+function:slideInHorizontally) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
fun slideInHorizontally(
    animationSpec: FiniteAnimationSpec<IntOffset> = spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntOffset.VisibilityThreshold,
        ),
    initialOffsetX: (fullWidth: Int) -> Int = { -it / 2 }
): EnterTransition
```

This slides in the content horizontally, from a starting offset defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideInHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` to `0` **pixels** . The direction of the slide can be controlled by configuring the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideInHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`. A positive value means sliding from right to left, whereas a negative value would slide the content from left to right.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideInHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` is a lambda that takes the full width of the content and returns an offset. This allows the starting offset to be defined proportional to the full size, or as an absolute value. It defaults to return half of negative width, which would offset the content to the left by half of its width, and slide towards the right.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideIn
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOut
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible = visible,
    enter =
        slideInHorizontally(animationSpec = tween(durationMillis = 200)) { fullWidth ->
            // Offsets the content by 1/3 of its width to the left, and slide towards right
            // Overwrites the default animation with tween for this slide animation.
            -fullWidth / 3
        } +
            fadeIn(
                // Overwrites the default animation with tween
                animationSpec = tween(durationMillis = 200)
            ),
    exit =
        slideOutHorizontally(animationSpec = spring(stiffness = Spring.StiffnessHigh)) {
            // Overwrites the ending position of the slide-out to 200 (pixels) to the right
            200
        } + fadeOut(),
) {
    // Content that needs to appear/disappear goes here:
    Box(Modifier.fillMaxWidth().requiredHeight(200.dp)) {}
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset> = spring( stiffness = Spring.StiffnessMediumLow, visibilityThreshold = IntOffset.VisibilityThreshold, )` | the animation used for the slide-in, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default. |
| `initialOffsetX: (fullWidth: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = { -it / 2 }` | a lambda that takes the full width of the content in pixels and returns the initial offset for the slide-in, by default it returns `-fullWidth/2` |

### slideInVertically

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/EnterExitTransition.kt+function:slideInVertically) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
fun slideInVertically(
    animationSpec: FiniteAnimationSpec<IntOffset> = spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntOffset.VisibilityThreshold,
        ),
    initialOffsetY: (fullHeight: Int) -> Int = { -it / 2 }
): EnterTransition
```

This slides in the content vertically, from a starting offset defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideInVertically(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` to `0` in **pixels** . The direction of the slide can be controlled by configuring the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideInVertically(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`. A positive initial offset means sliding up, whereas a negative value would slide the content down.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideInVertically(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` is a lambda that takes the full Height of the content and returns an offset. This allows the starting offset to be defined proportional to the full height, or as an absolute value. It defaults to return half of negative height, which would offset the content up by half of its Height, and slide down.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.slideIn
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOut
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.TransformOrigin
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible = visible,
    enter =
        slideInVertically(
            // Start the slide from 40 (pixels) above where the content is supposed to go, to
            // produce a parallax effect
            initialOffsetY = { -40 }
        ) +
            expandVertically(expandFrom = Alignment.Top) +
            scaleIn(
                // Animate scale from 0f to 1f using the top center as the pivot point.
                transformOrigin = TransformOrigin(0.5f, 0f)
            ) +
            fadeIn(initialAlpha = 0.3f),
    exit = slideOutVertically() + shrinkVertically() + fadeOut() + scaleOut(targetScale = 1.2f),
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp))
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset> = spring( stiffness = Spring.StiffnessMediumLow, visibilityThreshold = IntOffset.VisibilityThreshold, )` | the animation used for the slide-in, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default. |
| `initialOffsetY: (fullHeight: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = { -it / 2 }` | a lambda that takes the full Height of the content and returns the initial offset for the slide-in, by default it returns `-fullHeight/2` |

### slideOut

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/EnterExitTransition.kt+function:slideOut) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
fun slideOut(
    animationSpec: FiniteAnimationSpec<IntOffset> = spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntOffset.VisibilityThreshold,
        ),
    targetOffset: (fullSize: IntSize) -> IntOffset
): ExitTransition
```

This slides out the content of the transition, from an offset of `IntOffset(0, 0)` to the target offset defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`. The direction of the slide can be controlled by configuring the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`. A positive x value means sliding from left to right, whereas a negative x value would slide the content from right to left. Similarly, positive and negative y values correspond to sliding down and up, respectively.

If the sliding is only desired horizontally or vertically, instead of along both axis, consider using `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOutHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` or `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOutVertically(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` is a lambda that takes the full size of the content and returns an offset. This allows the offset to be defined proportional to the full size, or as an absolute value.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.tween
import androidx.compose.animation.slideIn
import androidx.compose.animation.slideOut
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible,
    enter =
        slideIn(tween(100, easing = LinearOutSlowInEasing)) { fullSize ->
            // Specifies the starting offset of the slide-in to be 1/4 of the width to the
            // right,
            // 100 (pixels) below the content position, which results in a simultaneous slide up
            // and slide left.
            IntOffset(fullSize.width / 4, 100)
        },
    exit =
        slideOut(tween(100, easing = FastOutSlowInEasing)) {
            // The offset can be entirely independent of the size of the content. This specifies
            // a target offset 180 pixels to the left of the content, and 50 pixels below. This
            // will
            // produce a slide-left combined with a slide-down.
            IntOffset(-180, 50)
        },
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp))
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset> = spring( stiffness = Spring.StiffnessMediumLow, visibilityThreshold = IntOffset.VisibilityThreshold, )` | the animation used for the slide-out, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default. |
| `targetOffset: (fullSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset` | a lambda that takes the full size of the content and returns the target offset for the slide-out |

### slideOutHorizontally

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/EnterExitTransition.kt+function:slideOutHorizontally) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
fun slideOutHorizontally(
    animationSpec: FiniteAnimationSpec<IntOffset> = spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntOffset.VisibilityThreshold,
        ),
    targetOffsetX: (fullWidth: Int) -> Int = { -it / 2 }
): ExitTransition
```

This slides out the content horizontally, from 0 to a target offset defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOutHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` in **pixels** . The direction of the slide can be controlled by configuring the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOutHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`. A positive value means sliding to the right, whereas a negative value would slide the content towards the left.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOutHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` is a lambda that takes the full width of the content and returns an offset. This allows the target offset to be defined proportional to the full size, or as an absolute value. It defaults to return half of negative width, which would slide the content to the left by half of its width.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideIn
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOut
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible = visible,
    enter =
        slideInHorizontally(animationSpec = tween(durationMillis = 200)) { fullWidth ->
            // Offsets the content by 1/3 of its width to the left, and slide towards right
            // Overwrites the default animation with tween for this slide animation.
            -fullWidth / 3
        } +
            fadeIn(
                // Overwrites the default animation with tween
                animationSpec = tween(durationMillis = 200)
            ),
    exit =
        slideOutHorizontally(animationSpec = spring(stiffness = Spring.StiffnessHigh)) {
            // Overwrites the ending position of the slide-out to 200 (pixels) to the right
            200
        } + fadeOut(),
) {
    // Content that needs to appear/disappear goes here:
    Box(Modifier.fillMaxWidth().requiredHeight(200.dp)) {}
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset> = spring( stiffness = Spring.StiffnessMediumLow, visibilityThreshold = IntOffset.VisibilityThreshold, )` | the animation used for the slide-out, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default. |
| `targetOffsetX: (fullWidth: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = { -it / 2 }` | a lambda that takes the full width of the content and returns the initial offset for the slide-in, by default it returns `fullWidth/2` |

### slideOutVertically

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/EnterExitTransition.kt+function:slideOutVertically) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
fun slideOutVertically(
    animationSpec: FiniteAnimationSpec<IntOffset> = spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntOffset.VisibilityThreshold,
        ),
    targetOffsetY: (fullHeight: Int) -> Int = { -it / 2 }
): ExitTransition
```

This slides out the content vertically, from 0 to a target offset defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOutVertically(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` in **pixels** . The direction of the slide-out can be controlled by configuring the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOutVertically(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`. A positive target offset means sliding down, whereas a negative value would slide the content up.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOutVertically(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` is a lambda that takes the full Height of the content and returns an offset. This allows the target offset to be defined proportional to the full height, or as an absolute value. It defaults to return half of the negative height, which would slide the content up by half of its Height.

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset> = spring( stiffness = Spring.StiffnessMediumLow, visibilityThreshold = IntOffset.VisibilityThreshold, )` | the animation used for the slide-out, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default. |
| `targetOffsetY: (fullHeight: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = { -it / 2 }` | a lambda that takes the full Height of the content and returns the target offset for the slide-out, by default it returns `fullHeight/2` |

### splineBasedDecay

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/SplineBasedDecay.kt+function:splineBasedDecay) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0)

```
fun <T : Any?> splineBasedDecay(density: Density): DecayAnimationSpec<T>
```

### unveilIn

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/EnterExitTransition.kt+function:unveilIn) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.10.0)

```
fun unveilIn(
    animationSpec: FiniteAnimationSpec<Color> = spring(stiffness = Spring.StiffnessMediumLow),
    initialColor: Color = Color.Black.copy(alpha = 0.5f),
    matchParentSize: Boolean = false
): EnterTransition
```

This animates an unveiling scrim over the content as it enters.

```kotlin
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.togetherWith
import androidx.compose.animation.unveilIn
import androidx.compose.animation.veilOut
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

var visible by remember { mutableStateOf(true) }
Column {
    Button(onClick = { visible = !visible }) { Text("Toggle") }
    AnimatedContent(
        targetState = visible,
        transitionSpec = {
            if (targetState) {
                (slideInHorizontally { it } togetherWith veilOut()).apply {
                    targetContentZIndex = 1f
                }
            } else {
                unveilIn() togetherWith slideOutHorizontally { it }
            }
        },
    ) { isVisible ->
        if (isVisible) {
            Text(modifier = Modifier.fillMaxSize().background(Color.Red), text = "Page 2")
        } else {
            Text(modifier = Modifier.fillMaxSize(), text = "Page 1")
        }
    }
}
```

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.unveilIn
import androidx.compose.animation.veilOut
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.padding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
Column(modifier = Modifier.background(Color.White)) {
    Button(onClick = { visible = !visible }) { Text("Toggle") }
    AnimatedVisibility(
        visible = visible,
        enter = unveilIn(initialColor = Color.White),
        exit = veilOut(targetColor = Color.White),
    ) {
        Box(Modifier.fillMaxSize().padding(30.dp).background(Color.Blue)) { Text("Content") }
    }
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color> = spring(stiffness = Spring.StiffnessMediumLow)` | the animation used for the scrim, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default. |
| `initialColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = Color.Black.copy(alpha = 0.5f)` | the starting color of the scrim. |
| `matchParentSize: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | whether the scrim should match the parent size. When `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#unveilIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.graphics.Color,kotlin.Boolean)` is true, the veil is applied independently from all other transforms and matches the parent size. When `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#unveilIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.graphics.Color,kotlin.Boolean)` is false, the veil is applied first and thus is affected by other transforms. Note: The veil may be clipped if a clip modifier is used on the same layout as the EnterTransition, even when `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#unveilIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.graphics.Color,kotlin.Boolean)` is true. |

### veilOut

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/EnterExitTransition.kt+function:veilOut) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.10.0)

```
fun veilOut(
    animationSpec: FiniteAnimationSpec<Color> = spring(stiffness = Spring.StiffnessMediumLow),
    targetColor: Color = Color.Black.copy(alpha = 0.5f),
    matchParentSize: Boolean = false
): ExitTransition
```

This animates a veiling scrim over the content as it exits.

```kotlin
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.togetherWith
import androidx.compose.animation.unveilIn
import androidx.compose.animation.veilOut
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

var visible by remember { mutableStateOf(true) }
Column {
    Button(onClick = { visible = !visible }) { Text("Toggle") }
    AnimatedContent(
        targetState = visible,
        transitionSpec = {
            if (targetState) {
                (slideInHorizontally { it } togetherWith veilOut()).apply {
                    targetContentZIndex = 1f
                }
            } else {
                unveilIn() togetherWith slideOutHorizontally { it }
            }
        },
    ) { isVisible ->
        if (isVisible) {
            Text(modifier = Modifier.fillMaxSize().background(Color.Red), text = "Page 2")
        } else {
            Text(modifier = Modifier.fillMaxSize(), text = "Page 1")
        }
    }
}
```

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.unveilIn
import androidx.compose.animation.veilOut
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.padding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
Column(modifier = Modifier.background(Color.White)) {
    Button(onClick = { visible = !visible }) { Text("Toggle") }
    AnimatedVisibility(
        visible = visible,
        enter = unveilIn(initialColor = Color.White),
        exit = veilOut(targetColor = Color.White),
    ) {
        Box(Modifier.fillMaxSize().padding(30.dp).background(Color.Blue)) { Text("Content") }
    }
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color> = spring(stiffness = Spring.StiffnessMediumLow)` | the animation used for the scrim, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default. |
| `targetColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = Color.Black.copy(alpha = 0.5f)` | the target color of the scrim. |
| `matchParentSize: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | whether the scrim should match the parent size. When `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#veilOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.graphics.Color,kotlin.Boolean)` is true, the veil is applied independently from all other transforms and matches the parent size. When `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#veilOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.graphics.Color,kotlin.Boolean)` is false, the veil is applied first and thus is affected by other transforms. Note: The veil may be clipped if a clip modifier is used on the same layout as the ExitTransition, even when `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#veilOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.graphics.Color,kotlin.Boolean)` is true. |

## Extension functions

### EnterTransition.togetherWith

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/AnimatedContent.kt+function:togetherWith) Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.5.0)

```
infix fun EnterTransition.togetherWith(exit: ExitTransition): ContentTransform
```

This creates a `https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform` using the provided `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.EnterTransition).togetherWith(androidx.compose.animation.ExitTransition)`, where the enter and exit transition will be running simultaneously. For example:

```kotlin
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedContentTransitionScope
import androidx.compose.animation.ContentTransform
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.core.keyframes
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.togetherWith
import androidx.compose.ui.unit.IntSize

// enum class CartState { Expanded, Collapsed }
val transitionSpec: AnimatedContentTransitionScope<CartState>.() -> ContentTransform = {
    // Fade in with a delay so that it starts after fade out
    fadeIn(animationSpec = tween(150, delayMillis = 150))
        .togetherWith(fadeOut(animationSpec = tween(150)))
        .using(
            SizeTransform { initialSize, targetSize ->
                // Using different SizeTransform for different state change
                if (CartState.Collapsed isTransitioningTo CartState.Expanded) {
                    keyframes {
                        durationMillis = 500
                        // Animate to full target width and by 200px in height at 150ms
                        IntSize(targetSize.width, initialSize.height + 200) at 150
                    }
                } else {
                    keyframes {
                        durationMillis = 500
                        // Animate 1/2 the height without changing the width at 150ms.
                        // The width and rest of the height will be animated in the
                        // timeframe between 150ms and duration (i.e. 500ms)
                        IntSize(
                            initialSize.width,
                            (initialSize.height + targetSize.height) / 2,
                        ) at 150
                    }
                }
            }
        )
}
```

## Extension properties

### Color.Companion.VectorConverter

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/ColorVectorConverter.kt+symbol:VectorConverter) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0)

```
val Color.Companion.VectorConverter: (colorSpace: ColorSpace) -> TwoWayConverter<Color, AnimationVector4D>
```

A lambda that takes a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/colorspace/ColorSpace` and returns a converter that can both convert a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` to a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationVector4D`, and convert a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationVector4D`) back to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` in the given `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/colorspace/ColorSpace`.