{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

EnterTransition

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 EnterTransitions can be combined using plus operator, for example:

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: 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.

See also
fadeIn
scaleIn
slideIn
slideInHorizontally
slideInVertically
expandIn
expandHorizontally
expandVertically
AnimatedVisibility

Summary

Nested types

public static class EnterTransition.Companion

Protected constructors

Public methods

boolean
equals(Object other)
int
final @NonNull EnterTransition

Combines different enter transitions.

@NonNull String

Extension functions

final @NonNull ContentTransform

This creates a ContentTransform using the provided EnterTransition and exit, where the enter and exit transition will be running simultaneously.

final @NonNull ContentTransform

This method is deprecated. Infix fun EnterTransition.with(ExitTransition) has been renamed to togetherWith

Protected constructors

EnterTransition

protected EnterTransition()

Public methods

equals

public boolean equals(Object other)

hashCode

public int hashCode()

plus

public final @NonNull EnterTransition plus(@NonNull EnterTransition enter)

Combines different enter transitions. The order of the EnterTransitions being combined does not matter, as these EnterTransitions will start simultaneously. The order of applying transforms from these enter transitions (if defined) is: alpha and scale first, shrink or expand, then slide.

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
@NonNull EnterTransition enter

another EnterTransition to be combined

toString

public @NonNull String toString()

Extension functions

AnimatedContentKt.togetherWith

public final @NonNull ContentTransform AnimatedContentKt.togetherWith(
    @NonNull EnterTransition receiver,
    @NonNull ExitTransition exit
)

This creates a ContentTransform using the provided EnterTransition and exit, where the enter and exit transition will be running simultaneously. For example:

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedContentScope
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.with
import androidx.compose.ui.unit.IntSize

// enum class CartState { Expanded, Collapsed }
val transitionSpec: AnimatedContentScope<CartState>.() -> ContentTransform =
    {
        // Fade in with a delay so that it starts after fade out
        fadeIn(animationSpec = tween(150, delayMillis = 150))
            .with(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
                        }
                    }
                }
            )
    }

AnimatedContentKt.with

@ExperimentalAnimationApi
public final @NonNull ContentTransform AnimatedContentKt.with(
    @NonNull EnterTransition receiver,
    @NonNull ExitTransition exit
)