# EnterTransition

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

  ```
  sealed class 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. The 4 categories of EnterTransitions available are:

1. fade: `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)`

2. scale: `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)`

3. slide: `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)`

4. expand: `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)`

`https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition#None()` can be used when no enter transition is desired. Different `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition`s can be combined using plus operator, for example:

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

**Note** : `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#scaleIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` do not affect the size of the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable. In contrast, `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)` will grow the clip bounds to reveal the whole content. This will automatically animate other layouts out of the way, very much like `https://developer.android.com/reference/kotlin/androidx/compose/animation/animateContentSize.modifier#(androidx.compose.ui.Modifier).animateContentSize(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function2)`.

| See also |
|---|---|
| `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#scaleIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)` |   |
| `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/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)` |   |
| `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)` |   |

## Summary

| ### Public companion properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition#None()` This can be used when no enter transition is desired. | Cmn |

| ### Protected constructors |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition#EnterTransition()()` | Cmn |

| ### Public functions |
|---|---|---|
| `open operator https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition#equals(kotlin.Any)(other: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?)` | Cmn |
| `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition#hashCode()()` | Cmn |
| `operator https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition#plus(androidx.compose.animation.EnterTransition)(enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition)` Combines different enter transitions. | Cmn |
| `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition#toString()()` | Cmn |

| ### Public properties |
|---|---|---|
| `abstract https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterExitTransitionConfig` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition#config()` The underlying transition configuration containing the specs for fade, slide, scale, expand, and veil animations. | Cmn |

| ### Extension functions |
|---|---|---|
| `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/EnterTransition#(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 |

## Public companion properties

### None

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

```
val None: EnterTransition
```

This can be used when no enter transition is desired. It can be useful in cases where there are other forms of enter animation defined indirectly for 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)`. e.g.The children of the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` have all defined their own `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition`, or when the parent is fading in, etc.

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#None()` |   |

## Protected constructors

### EnterTransition

Cmn

```
protected EnterTransition()
```

## Public functions

### equals

Cmn

```
open operator fun equals(other: Any?): Boolean
```

### hashCode

Cmn

```
open fun hashCode(): Int
```

### plus

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

```
operator fun plus(enter: EnterTransition): EnterTransition
```

Combines different enter transitions. The order of the `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition`s being combined does not matter, as these `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition`s will start simultaneously. The order of applying transforms from these enter transitions (if defined) is: veil first, then alpha and scale, shrink or expand, then slide.

```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 |
|---|---|
| `enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` | another `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` to be combined |

### toString

Cmn

```
open fun toString(): String
```

## Public properties

### config

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

```
abstract val config: EnterExitTransitionConfig
```

The underlying transition configuration containing the specs for fade, slide, scale, expand, and veil animations.

## 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)

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