# ContentTransform

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+class:androidx.compose.animation.ContentTransform) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0) Common/AllAndroid/JVM
- Cmn

  ```
  class 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.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform#targetContentEnter()` defines the enter transition for the content associated with the new target state. It can be a combination of `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#slideIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`/`https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideInHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` /`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/AnimatedContentTransitionScope#slideIntoContainer(androidx.compose.animation.AnimatedContentTransitionScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`, and expand. Similarly, `https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform#initialContentExit()` supports a combination of `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` for animating out the initial content (i.e. outgoing content). If the initial content and target content are of different size, the `https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform#(androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Float,androidx.compose.animation.SizeTransform)` will be triggered unless it's explicitly set to `null`. `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)` can provide container-size-aware sliding in from the edge of the container, or sliding out to the edge of the container.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform` supports the zIndex definition when the content enters the `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)` container via `https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform#(androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Float,androidx.compose.animation.SizeTransform)`. By default, all content has a `0f` zIndex. Among content with the same zIndex, the incoming target content will be on top, as it will be placed last. However, this may not always be desired. zIndex can be specified to change that order. The content with higher zIndex guarantee to be placed on top of content with lower zIndex.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform#(androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Float,androidx.compose.animation.SizeTransform)` manages the expanding and shrinking of the container if there is any size change as new content enters the `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 old content leaves. Unlike `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)`, for `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)` it is generally more predictable to manage the size of the container using `https://developer.android.com/reference/kotlin/androidx/compose/animation/SizeTransform` than influencing the size using `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#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)`, etc for each content. By default, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` will be used to animate any size change, and `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)` will be clipped to the animated size. Both can be customized by supplying a different `https://developer.android.com/reference/kotlin/androidx/compose/animation/SizeTransform`. If no size animation is desired, `https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform#(androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Float,androidx.compose.animation.SizeTransform)` can be set to `null`.

```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
                    }
                }
            }
        )
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SizeTransform` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` |   |
| `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)` |   |

## Summary

| ### Public constructors |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform#ContentTransform(androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Float,androidx.compose.animation.SizeTransform)( targetContentEnter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition, initialContentExit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition, targetContentZIndex: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, sizeTransform: https://developer.android.com/reference/kotlin/androidx/compose/animation/SizeTransform? )` | Cmn |

| ### Public properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform#initialContentExit()` | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SizeTransform?` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform#sizeTransform()` `https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform#sizeTransform()` manages the expanding and shrinking of the container if there is any size change as new content enters the `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 old content leaves. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform#targetContentEnter()` | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform#targetContentZIndex()` This describes the zIndex of the new target content as it enters the container. | Cmn |

## Public constructors

### ContentTransform

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

```
ContentTransform(
    targetContentEnter: EnterTransition,
    initialContentExit: ExitTransition,
    targetContentZIndex: Float = 0.0f,
    sizeTransform: SizeTransform? = AnimatedContentDefaults.SizeTransform
)
```

## Public properties

### initialContentExit

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

```
val initialContentExit: ExitTransition
```

### sizeTransform

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

```
val sizeTransform: SizeTransform?
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform#sizeTransform()` manages the expanding and shrinking of the container if there is any size change as new content enters the `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 old content leaves. By default, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` will be used to animate any size change, and `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)` will be clipped to the animated size. Both can be customized by supplying a different `https://developer.android.com/reference/kotlin/androidx/compose/animation/SizeTransform`. If no size animation is desired, `https://developer.android.com/reference/kotlin/androidx/compose/animation/ContentTransform#sizeTransform()` can be set to `null`.

### targetContentEnter

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

```
val targetContentEnter: EnterTransition
```

### targetContentZIndex

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

```
var targetContentZIndex: Float
```

This describes the zIndex of the new target content as it enters the container. It defaults to 0f. Content with higher zIndex will be drawn over lower `zIndex`ed content. Among content with the same index, the target content will be placed on top.