Google is committed to advancing racial equity for Black communities. See how.

EnterTransition

@Immutable sealed class EnterTransition
kotlin.Any
   ↳ androidx.compose.animation.EnterTransition

EnterTransition defines how an AnimatedVisibility Composable appears on screen as it becomes visible. The 3 categories of EnterTransitions available are:

  1. fade fadeIn)
  2. slide: slideIn, slideInHorizontally, slideInVertically
  3. expand: expandIn, expandHorizontally, expandVertically They can be combined using plus operator, for example:
import androidx.compose.animation.AnimatedVisibility
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.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible = visible,
    enter = slideInHorizontally(
        // Offsets the content by 1/3 of its width to the left, and slide towards right
        initialOffsetX = { fullWidth -> -fullWidth / 3 },
        // Overwrites the default animation with tween for this slide animation.
        animSpec = tween(durationMillis = 200)
    ) + fadeIn(
        // Overwrites the default animation with tween
        animSpec = tween(durationMillis = 200)
    ),
    exit = slideOutHorizontally(
        // Overwrites the ending position of the slide-out to 200 (pixels) to the right
        targetOffsetX = { 200 },
        animSpec = spring(stiffness = Spring.StiffnessHigh)
    ) + fadeOut()
) {
    // Content that needs to appear/disappear goes here:
    Box(Modifier.fillMaxWidth().height(200.dp)) {}
}
Note: fadeIn and slideIn do not affect the size of the AnimatedVisibilitycomposable. In contrast, expandIn will grow the clip bounds to reveal the whole content. Thiswill automatically animate other layouts out of the way, very much like animateContentSize.

Summary

Public methods
operator EnterTransition

Combines different enter transitions.

Public methods

plus

@Stable operator fun plus(enter: EnterTransition): EnterTransition

Combines different enter transitions. The order of the EnterTransitions being combined does not matter, as these EnterTransitions will start simultaneously.

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

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
    ) + fadeIn(initialAlpha = 0.3f),
    exit = slideOutVertically() + shrinkVertically() + fadeOut()
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().height(200.dp))
}
Parameters
enter: EnterTransition another EnterTransition to be combined