---
title: "EnterTransition"
description: "[EnterTransition] defines how an [AnimatedVisibility] Composable appears on screen as it becomes
visible. The 4 categories of EnterTransitions available are:
1. fade: [fadeIn]
2. scale: [scaleIn]
3. slide: [slideIn], [slideInHorizontally], [slideInVertically]
4. expand: [expandIn], [expandHorizontally], [expandVertically]

[EnterTransition.None] can be used when no enter transition is desired. Different
[EnterTransition]s can be combined using plus operator, for example:


__Note__: [fadeIn], [scaleIn] and [slideIn] do not affect the size of the [AnimatedVisibility]
composable. In contrast, [expandIn] will grow the clip bounds to reveal the whole content. This
will automatically animate other layouts out of the way, very much like [animateContentSize]."
type: "class"
---

<div class='type'>Class</div>


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

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


```kotlin
public sealed class EnterTransition
```


`EnterTransition` defines how an `AnimatedVisibility` Composable appears on screen as it becomes
visible. The 4 categories of EnterTransitions available are:
1. fade: `fadeIn`
2. scale: `scaleIn`
3. slide: `slideIn`, `slideInHorizontally`, `slideInVertically`
4. expand: `expandIn`, `expandHorizontally`, `expandVertically`

`EnterTransition.None` can be used when no enter transition is desired. Different
`EnterTransition`s can be combined using plus operator, for example:


__Note__: `fadeIn`, `scaleIn` and `slideIn` do not affect the size of the `AnimatedVisibility`
composable. In contrast, `expandIn` will grow the clip bounds to reveal the whole content. This
will automatically animate other layouts out of the way, very much like `animateContentSize`.


## Functions

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


Combines different enter transitions. The order of the `EnterTransition`s being combined does
not matter, as these `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.

#### Parameters

| | |
| --- | --- |
| enter | another `EnterTransition` to be combined |



## Companion Object

#### Properties

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


```kotlin
public 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 `AnimatedVisibility`.
e.g.The children of the `AnimatedVisibility` have all defined their own
`EnterTransition`, or when the parent is fading in, etc.





## Code Examples

### SlideTransition
```kotlin
@Composable
fun SlideTransition() {
    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)) {}
    }
}
```