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

EnterExitTransitionKt

public final class EnterExitTransitionKt


Summary

Public methods

static final @NonNull EnterTransition
expandHorizontally(
    @NonNull FiniteAnimationSpec<@NonNull IntSize> animationSpec,
    @NonNull Alignment.Horizontal expandFrom,
    boolean clip,
    @NonNull Function1<@NonNull Integer, @NonNull Integer> initialWidth
)

This expands the clip bounds of the appearing content horizontally, from the width returned from initialWidth to the full width.

static final @NonNull EnterTransition
expandIn(
    @NonNull FiniteAnimationSpec<@NonNull IntSize> animationSpec,
    @NonNull Alignment expandFrom,
    boolean clip,
    @NonNull Function1<@NonNull IntSize, @NonNull IntSize> initialSize
)

This expands the clip bounds of the appearing content from the size returned from initialSize to the full size.

static final @NonNull EnterTransition
expandVertically(
    @NonNull FiniteAnimationSpec<@NonNull IntSize> animationSpec,
    @NonNull Alignment.Vertical expandFrom,
    boolean clip,
    @NonNull Function1<@NonNull Integer, @NonNull Integer> initialHeight
)

This expands the clip bounds of the appearing content vertically, from the height returned from initialHeight to the full height.

static final @NonNull EnterTransition
fadeIn(
    @NonNull FiniteAnimationSpec<@NonNull Float> animationSpec,
    float initialAlpha
)

This fades in the content of the transition, from the specified starting alpha (i.e. initialAlpha) to 1f, using the supplied animationSpec.

static final @NonNull ExitTransition
fadeOut(
    @NonNull FiniteAnimationSpec<@NonNull Float> animationSpec,
    float targetAlpha
)

This fades out the content of the transition, from full opacity to the specified target alpha (i.e. targetAlpha), using the supplied animationSpec.

static final @NonNull EnterTransition
scaleIn(
    @NonNull FiniteAnimationSpec<@NonNull Float> animationSpec,
    float initialScale,
    @NonNull TransformOrigin transformOrigin
)

This scales the content as it appears, from an initial scale (defined in initialScale) to 1f.

static final @NonNull ExitTransition
scaleOut(
    @NonNull FiniteAnimationSpec<@NonNull Float> animationSpec,
    float targetScale,
    @NonNull TransformOrigin transformOrigin
)

This scales the content of the exit transition, from 1f to the target scale defined in targetScale.

static final @NonNull ExitTransition
shrinkHorizontally(
    @NonNull FiniteAnimationSpec<@NonNull IntSize> animationSpec,
    @NonNull Alignment.Horizontal shrinkTowards,
    boolean clip,
    @NonNull Function1<@NonNull Integer, @NonNull Integer> targetWidth
)

This shrinks the clip bounds of the disappearing content horizontally, from the full width to the width returned from targetWidth.

static final @NonNull ExitTransition
shrinkOut(
    @NonNull FiniteAnimationSpec<@NonNull IntSize> animationSpec,
    @NonNull Alignment shrinkTowards,
    boolean clip,
    @NonNull Function1<@NonNull IntSize, @NonNull IntSize> targetSize
)

This shrinks the clip bounds of the disappearing content from the full size to the size returned from targetSize.

static final @NonNull ExitTransition
shrinkVertically(
    @NonNull FiniteAnimationSpec<@NonNull IntSize> animationSpec,
    @NonNull Alignment.Vertical shrinkTowards,
    boolean clip,
    @NonNull Function1<@NonNull Integer, @NonNull Integer> targetHeight
)

This shrinks the clip bounds of the disappearing content vertically, from the full height to the height returned from targetHeight.

static final @NonNull EnterTransition
slideIn(
    @NonNull FiniteAnimationSpec<@NonNull IntOffset> animationSpec,
    @NonNull Function1<@NonNull IntSize, @NonNull IntOffset> initialOffset
)

This slides in the content of the transition, from a starting offset defined in initialOffset to IntOffset(0, 0).

static final @NonNull EnterTransition
slideInHorizontally(
    @NonNull FiniteAnimationSpec<@NonNull IntOffset> animationSpec,
    @NonNull Function1<@NonNull Integer, @NonNull Integer> initialOffsetX
)

This slides in the content horizontally, from a starting offset defined in initialOffsetX to 0 pixels.

static final @NonNull EnterTransition
slideInVertically(
    @NonNull FiniteAnimationSpec<@NonNull IntOffset> animationSpec,
    @NonNull Function1<@NonNull Integer, @NonNull Integer> initialOffsetY
)

This slides in the content vertically, from a starting offset defined in initialOffsetY to 0 in pixels.

static final @NonNull ExitTransition
slideOut(
    @NonNull FiniteAnimationSpec<@NonNull IntOffset> animationSpec,
    @NonNull Function1<@NonNull IntSize, @NonNull IntOffset> targetOffset
)

This slides out the content of the transition, from an offset of IntOffset(0, 0) to the target offset defined in targetOffset.

static final @NonNull ExitTransition
slideOutHorizontally(
    @NonNull FiniteAnimationSpec<@NonNull IntOffset> animationSpec,
    @NonNull Function1<@NonNull Integer, @NonNull Integer> targetOffsetX
)

This slides out the content horizontally, from 0 to a target offset defined in targetOffsetX in pixels.

static final @NonNull ExitTransition
slideOutVertically(
    @NonNull FiniteAnimationSpec<@NonNull IntOffset> animationSpec,
    @NonNull Function1<@NonNull Integer, @NonNull Integer> targetOffsetY
)

This slides out the content vertically, from 0 to a target offset defined in targetOffsetY in pixels.

Public methods

expandHorizontally

public static final @NonNull EnterTransition expandHorizontally(
    @NonNull FiniteAnimationSpec<@NonNull IntSize> animationSpec,
    @NonNull Alignment.Horizontal expandFrom,
    boolean clip,
    @NonNull Function1<@NonNull Integer, @NonNull Integer> initialWidth
)

This expands the clip bounds of the appearing content horizontally, from the width returned from initialWidth to the full width. expandFrom controls which part of the content gets revealed first. By default, the clip bounds animates from 0 to full width, starting from the end of the content, and expand to fully revealing the whole content.

Note: expandHorizontally animates the bounds of the content. This bounds change will also result in the animation of other layouts that are dependent on this size.

initialWidth is a lambda that takes the full width of the content and returns an initial width of the bounds of the content. This allows not only an absolute width, but also an initial width that is proportional to the content width.

clip defines whether the content outside of the animated bounds should be clipped. By default, clip is set to true, which only shows content in the animated bounds.

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandHorizontally
import androidx.compose.animation.shrinkHorizontally
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.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible = visible,
    // Set the start width to 20 (pixels), 0 by default
    enter = expandHorizontally { 20 },
    exit = shrinkHorizontally(
        // Overwrites the default animation with tween for this shrink animation.
        animationSpec = tween(),
        // Shrink towards the end (i.e. right edge for LTR, left edge for RTL). The default
        // direction for the shrink is towards [Alignment.Start]
        shrinkTowards = Alignment.End,
    ) { fullWidth ->
        // Set the end width for the shrink animation to a quarter of the full width.
        fullWidth / 4
    }
) {
    // Content that needs to appear/disappear goes here:
    Box(Modifier.fillMaxWidth().requiredHeight(200.dp))
}
Parameters
@NonNull FiniteAnimationSpec<@NonNull IntSize> animationSpec

the animation used for the expanding animation, spring by default.

@NonNull Alignment.Horizontal expandFrom

the starting point of the expanding bounds, Alignment.End by default.

boolean clip

whether the content outside of the animated bounds should be clipped, true by default

@NonNull Function1<@NonNull Integer, @NonNull Integer> initialWidth

the start width of the expanding bounds, returning 0 by default.

expandIn

public static final @NonNull EnterTransition expandIn(
    @NonNull FiniteAnimationSpec<@NonNull IntSize> animationSpec,
    @NonNull Alignment expandFrom,
    boolean clip,
    @NonNull Function1<@NonNull IntSize, @NonNull IntSize> initialSize
)

This expands the clip bounds of the appearing content from the size returned from initialSize to the full size. expandFrom controls which part of the content gets revealed first. By default, the clip bounds animates from IntSize(0, 0) to full size, starting from revealing the bottom right corner (or bottom left corner in RTL layouts) of the content, to fully revealing the entire content as the size expands.

Note: expandIn animates the bounds of the content. This bounds change will also result in the animation of other layouts that are dependent on this size.

initialSize is a lambda that takes the full size of the content and returns an initial size of the bounds of the content. This allows not only absolute size, but also an initial size that is proportional to the content size.

clip defines whether the content outside of the animated bounds should be clipped. By default, clip is set to true, which only shows content in the animated bounds.

For expanding only horizontally or vertically, consider expandHorizontally, expandVertically.

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandIn
import androidx.compose.animation.shrinkOut
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
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.draw.clip
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible,
    enter = expandIn(
        // Overwrites the default spring animation with tween
        animationSpec = tween(100, easing = LinearOutSlowInEasing),
        // Overwrites the corner of the content that is first revealed
        expandFrom = Alignment.BottomStart
    ) {
        // Overwrites the initial size to 50 pixels by 50 pixels
        IntSize(50, 50)
    },
    exit = shrinkOut(
        tween(100, easing = FastOutSlowInEasing),
        // Overwrites the area of the content that the shrink animation will end on. The
        // following parameters will shrink the content's clip bounds from the full size of the
        // content to 1/10 of the width and 1/5 of the height. The shrinking clip bounds will
        // always be aligned to the CenterStart of the full-content bounds.
        shrinkTowards = Alignment.CenterStart
    ) { fullSize ->
        // Overwrites the target size of the shrinking animation.
        IntSize(fullSize.width / 10, fullSize.height / 5)
    }
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp))
}
Parameters
@NonNull FiniteAnimationSpec<@NonNull IntSize> animationSpec

the animation used for the expanding animation, spring by default.

@NonNull Alignment expandFrom

the starting point of the expanding bounds, Alignment.BottomEnd by default.

boolean clip

whether the content outside of the animated bounds should be clipped, true by default

@NonNull Function1<@NonNull IntSize, @NonNull IntSize> initialSize

the start size of the expanding bounds, returning IntSize(0, 0) by default.

expandVertically

public static final @NonNull EnterTransition expandVertically(
    @NonNull FiniteAnimationSpec<@NonNull IntSize> animationSpec,
    @NonNull Alignment.Vertical expandFrom,
    boolean clip,
    @NonNull Function1<@NonNull Integer, @NonNull Integer> initialHeight
)

This expands the clip bounds of the appearing content vertically, from the height returned from initialHeight to the full height. expandFrom controls which part of the content gets revealed first. By default, the clip bounds animates from 0 to full height, revealing the bottom edge first, followed by the rest of the content.

Note: expandVertically animates the bounds of the content. This bounds change will also result in the animation of other layouts that are dependent on this size.

initialHeight is a lambda that takes the full height of the content and returns an initial height of the bounds of the content. This allows not only an absolute height, but also an initial height that is proportional to the content height.

clip defines whether the content outside of the animated bounds should be clipped. By default, clip is set to true, which only shows content in the animated bounds.

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandVertically
import androidx.compose.animation.shrinkVertically
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
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.unit.dp

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible,
    // Sets the initial height of the content to 20, revealing only the top of the content at
    // the beginning of the expanding animation.
    enter = expandVertically(expandFrom = Alignment.Top) { 20 },
    // Shrinks the content to half of its full height via an animation.
    exit = shrinkVertically(animationSpec = tween()) { fullHeight ->
        fullHeight / 2
    },
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp))
}
Parameters
@NonNull FiniteAnimationSpec<@NonNull IntSize> animationSpec

the animation used for the expanding animation, spring by default.

@NonNull Alignment.Vertical expandFrom

the starting point of the expanding bounds, Alignment.Bottom by default.

boolean clip

whether the content outside of the animated bounds should be clipped, true by default

@NonNull Function1<@NonNull Integer, @NonNull Integer> initialHeight

the start height of the expanding bounds, returning 0 by default.

fadeIn

public static final @NonNull EnterTransition fadeIn(
    @NonNull FiniteAnimationSpec<@NonNull Float> animationSpec,
    float initialAlpha
)

This fades in the content of the transition, from the specified starting alpha (i.e. initialAlpha) to 1f, using the supplied animationSpec. initialAlpha defaults to 0f, and spring is used by default.

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
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.Modifier
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible = visible,
    enter = fadeIn(
        // Overwrites the initial value of alpha to 0.4f for fade in, 0 by default
        initialAlpha = 0.4f
    ),
    exit = fadeOut(
        // Overwrites the default animation with tween
        animationSpec = tween(durationMillis = 250)
    )
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp))
}
Parameters
@NonNull FiniteAnimationSpec<@NonNull Float> animationSpec

the FiniteAnimationSpec for this animation, spring by default

float initialAlpha

the starting alpha of the enter transition, 0f by default

fadeOut

public static final @NonNull ExitTransition fadeOut(
    @NonNull FiniteAnimationSpec<@NonNull Float> animationSpec,
    float targetAlpha
)

This fades out the content of the transition, from full opacity to the specified target alpha (i.e. targetAlpha), using the supplied animationSpec. By default, the content will be faded out to fully transparent (i.e. targetAlpha defaults to 0), and animationSpec uses spring by default.

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
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.Modifier
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible = visible,
    enter = fadeIn(
        // Overwrites the initial value of alpha to 0.4f for fade in, 0 by default
        initialAlpha = 0.4f
    ),
    exit = fadeOut(
        // Overwrites the default animation with tween
        animationSpec = tween(durationMillis = 250)
    )
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp))
}
Parameters
@NonNull FiniteAnimationSpec<@NonNull Float> animationSpec

the FiniteAnimationSpec for this animation, spring by default

float targetAlpha

the target alpha of the exit transition, 0f by default

scaleIn

public static final @NonNull EnterTransition scaleIn(
    @NonNull FiniteAnimationSpec<@NonNull Float> animationSpec,
    float initialScale,
    @NonNull TransformOrigin transformOrigin
)

This scales the content as it appears, from an initial scale (defined in initialScale) to 1f. transformOrigin defines the pivot point in terms of fraction of the overall size. TransformOrigin.Center by default. scaleIn can be used in combination with any other type of EnterTransition using the plus operator (e.g. scaleIn() + slideInHorizontally())

Note: Scale is applied before slide. This means when using slideIn/slideOut with scaleIn/scaleOut, the amount of scaling needs to be taken into account when sliding.

The scaling will change the visual of the content, but will not affect the layout size. scaleIn can be combined with expandIn/expandHorizontally/expandVertically to coordinate layout size change while scaling. For example:

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExitTransition
import androidx.compose.animation.expandIn
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.shrinkOut
import androidx.compose.animation.shrinkVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
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.Color
import androidx.compose.ui.graphics.TransformOrigin
import androidx.compose.ui.unit.dp

Column {
    var showRed by remember { mutableStateOf(true) }
    var showGreen by remember { mutableStateOf(true) }

    AnimatedVisibility(
        visible = showGreen,
        // By Default, `scaleIn` uses the center as its pivot point. When used with a vertical
        // expansion from the vertical center, the content will be growing from the center of
        // the vertically expanding layout.
        enter = scaleIn() + expandVertically(expandFrom = Alignment.CenterVertically),
        // By Default, `scaleOut` uses the center as its pivot point. When used with an
        // ExitTransition that shrinks towards the center, the content will be shrinking both
        // in terms of scale and layout size towards the center.
        exit = scaleOut() + shrinkVertically(shrinkTowards = Alignment.CenterVertically)
    ) {
        Box(
            Modifier.size(100.dp)
                .background(color = Color.Green, shape = RoundedCornerShape(20.dp))
        )
    }

    AnimatedVisibility(
        visible = showRed,
        // Scale up from the TopLeft by setting TransformOrigin to (0f, 0f), while expanding the
        // layout size from Top start and fading. This will create a coherent look as if the
        // scale is impacting the size.
        enter = scaleIn(transformOrigin = TransformOrigin(0f, 0f)) +
            fadeIn() + expandIn(expandFrom = Alignment.TopStart),
        // Scale down from the TopLeft by setting TransformOrigin to (0f, 0f), while shrinking
        // the layout towards Top start and fading. This will create a coherent look as if the
        // scale is impacting the layout size.
        exit = scaleOut(transformOrigin = TransformOrigin(0f, 0f)) +
            fadeOut() + shrinkOut(shrinkTowards = Alignment.TopStart)
    ) {
        Box(
            Modifier.size(100.dp)
                .background(color = Color.Red, shape = RoundedCornerShape(20.dp))
        )
    }
}
Parameters
@NonNull FiniteAnimationSpec<@NonNull Float> animationSpec

the animation used for the scale-out, spring by default.

float initialScale

the initial scale for the enter transition, 0 by default.

@NonNull TransformOrigin transformOrigin

the pivot point in terms of fraction of the overall size. By default it's TransformOrigin.Center.

scaleOut

public static final @NonNull ExitTransition scaleOut(
    @NonNull FiniteAnimationSpec<@NonNull Float> animationSpec,
    float targetScale,
    @NonNull TransformOrigin transformOrigin
)

This scales the content of the exit transition, from 1f to the target scale defined in targetScale. transformOrigin defines the pivot point in terms of fraction of the overall size. By default it's TransformOrigin.Center. scaleOut can be used in combination with any other type of ExitTransition using the plus operator (e.g. scaleOut() + fadeOut())

Note: Scale is applied before slide. This means when using slideIn/slideOut with scaleIn/scaleOut, the amount of scaling needs to be taken into account when sliding.

The scaling will change the visual of the content, but will not affect the layout size. scaleOut can be combined with shrinkOut/shrinkHorizontally/shrinkVertically for coordinated layout size change animation. For example:

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExitTransition
import androidx.compose.animation.expandIn
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.shrinkOut
import androidx.compose.animation.shrinkVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
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.Color
import androidx.compose.ui.graphics.TransformOrigin
import androidx.compose.ui.unit.dp

Column {
    var showRed by remember { mutableStateOf(true) }
    var showGreen by remember { mutableStateOf(true) }

    AnimatedVisibility(
        visible = showGreen,
        // By Default, `scaleIn` uses the center as its pivot point. When used with a vertical
        // expansion from the vertical center, the content will be growing from the center of
        // the vertically expanding layout.
        enter = scaleIn() + expandVertically(expandFrom = Alignment.CenterVertically),
        // By Default, `scaleOut` uses the center as its pivot point. When used with an
        // ExitTransition that shrinks towards the center, the content will be shrinking both
        // in terms of scale and layout size towards the center.
        exit = scaleOut() + shrinkVertically(shrinkTowards = Alignment.CenterVertically)
    ) {
        Box(
            Modifier.size(100.dp)
                .background(color = Color.Green, shape = RoundedCornerShape(20.dp))
        )
    }

    AnimatedVisibility(
        visible = showRed,
        // Scale up from the TopLeft by setting TransformOrigin to (0f, 0f), while expanding the
        // layout size from Top start and fading. This will create a coherent look as if the
        // scale is impacting the size.
        enter = scaleIn(transformOrigin = TransformOrigin(0f, 0f)) +
            fadeIn() + expandIn(expandFrom = Alignment.TopStart),
        // Scale down from the TopLeft by setting TransformOrigin to (0f, 0f), while shrinking
        // the layout towards Top start and fading. This will create a coherent look as if the
        // scale is impacting the layout size.
        exit = scaleOut(transformOrigin = TransformOrigin(0f, 0f)) +
            fadeOut() + shrinkOut(shrinkTowards = Alignment.TopStart)
    ) {
        Box(
            Modifier.size(100.dp)
                .background(color = Color.Red, shape = RoundedCornerShape(20.dp))
        )
    }
}
Parameters
@NonNull FiniteAnimationSpec<@NonNull Float> animationSpec

the animation used for the slide-out, spring by default.

float targetScale

the target scale for the exit transition, 0 by default.

@NonNull TransformOrigin transformOrigin

the pivot point in terms of fraction of the overall size. By default it's TransformOrigin.Center.

shrinkHorizontally

public static final @NonNull ExitTransition shrinkHorizontally(
    @NonNull FiniteAnimationSpec<@NonNull IntSize> animationSpec,
    @NonNull Alignment.Horizontal shrinkTowards,
    boolean clip,
    @NonNull Function1<@NonNull Integer, @NonNull Integer> targetWidth
)

This shrinks the clip bounds of the disappearing content horizontally, from the full width to the width returned from targetWidth. shrinkTowards controls the direction of the bounds shrink animation. By default, the clip bounds animates from full width to 0, shrinking towards the end of the content.

Note: shrinkHorizontally animates the bounds of the content. This bounds change will also result in the animation of other layouts that are dependent on this size.

targetWidth is a lambda that takes the full width of the content and returns a target width of the content. This allows not only absolute width, but also a target width that is proportional to the content width.

clip defines whether the content outside of the animated bounds should be clipped. By default, clip is set to true, which only shows content in the animated bounds.

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandHorizontally
import androidx.compose.animation.shrinkHorizontally
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.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible = visible,
    // Set the start width to 20 (pixels), 0 by default
    enter = expandHorizontally { 20 },
    exit = shrinkHorizontally(
        // Overwrites the default animation with tween for this shrink animation.
        animationSpec = tween(),
        // Shrink towards the end (i.e. right edge for LTR, left edge for RTL). The default
        // direction for the shrink is towards [Alignment.Start]
        shrinkTowards = Alignment.End,
    ) { fullWidth ->
        // Set the end width for the shrink animation to a quarter of the full width.
        fullWidth / 4
    }
) {
    // Content that needs to appear/disappear goes here:
    Box(Modifier.fillMaxWidth().requiredHeight(200.dp))
}
Parameters
@NonNull FiniteAnimationSpec<@NonNull IntSize> animationSpec

the animation used for the shrinking animation, spring by default.

@NonNull Alignment.Horizontal shrinkTowards

the ending point of the shrinking bounds, Alignment.End by default.

boolean clip

whether the content outside of the animated bounds should be clipped, true by default

@NonNull Function1<@NonNull Integer, @NonNull Integer> targetWidth

returns the end width of the shrinking bounds, 0 by default.

shrinkOut

public static final @NonNull ExitTransition shrinkOut(
    @NonNull FiniteAnimationSpec<@NonNull IntSize> animationSpec,
    @NonNull Alignment shrinkTowards,
    boolean clip,
    @NonNull Function1<@NonNull IntSize, @NonNull IntSize> targetSize
)

This shrinks the clip bounds of the disappearing content from the full size to the size returned from targetSize. shrinkTowards controls the direction of the bounds shrink animation. By default, the clip bounds animates from full size to IntSize(0, 0), shrinking towards the the bottom right corner (or bottom left corner in RTL layouts) of the content.

Note: shrinkOut animates the bounds of the content. This bounds change will also result in the animation of other layouts that are dependent on this size.

targetSize is a lambda that takes the full size of the content and returns a target size of the bounds of the content. This allows not only absolute size, but also a target size that is proportional to the content size.

clip defines whether the content outside of the animated bounds should be clipped. By default, clip is set to true, which only shows content in the animated bounds.

For shrinking only horizontally or vertically, consider shrinkHorizontally, shrinkVertically.

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandIn
import androidx.compose.animation.shrinkOut
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
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.draw.clip
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible,
    enter = expandIn(
        // Overwrites the default spring animation with tween
        animationSpec = tween(100, easing = LinearOutSlowInEasing),
        // Overwrites the corner of the content that is first revealed
        expandFrom = Alignment.BottomStart
    ) {
        // Overwrites the initial size to 50 pixels by 50 pixels
        IntSize(50, 50)
    },
    exit = shrinkOut(
        tween(100, easing = FastOutSlowInEasing),
        // Overwrites the area of the content that the shrink animation will end on. The
        // following parameters will shrink the content's clip bounds from the full size of the
        // content to 1/10 of the width and 1/5 of the height. The shrinking clip bounds will
        // always be aligned to the CenterStart of the full-content bounds.
        shrinkTowards = Alignment.CenterStart
    ) { fullSize ->
        // Overwrites the target size of the shrinking animation.
        IntSize(fullSize.width / 10, fullSize.height / 5)
    }
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp))
}
Parameters
@NonNull FiniteAnimationSpec<@NonNull IntSize> animationSpec

the animation used for the shrinking animation, spring by default.

@NonNull Alignment shrinkTowards

the ending point of the shrinking bounds, Alignment.BottomEnd by default.

boolean clip

whether the content outside of the animated bounds should be clipped, true by default

@NonNull Function1<@NonNull IntSize, @NonNull IntSize> targetSize

returns the end size of the shrinking bounds, IntSize(0, 0) by default.

shrinkVertically

public static final @NonNull ExitTransition shrinkVertically(
    @NonNull FiniteAnimationSpec<@NonNull IntSize> animationSpec,
    @NonNull Alignment.Vertical shrinkTowards,
    boolean clip,
    @NonNull Function1<@NonNull Integer, @NonNull Integer> targetHeight
)

This shrinks the clip bounds of the disappearing content vertically, from the full height to the height returned from targetHeight. shrinkTowards controls the direction of the bounds shrink animation. By default, the clip bounds animates from full height to 0, shrinking towards the bottom of the content.

Note: shrinkVertically animates the bounds of the content. This bounds change will also result in the animation of other layouts that are dependent on this size.

targetHeight is a lambda that takes the full height of the content and returns a target height of the content. This allows not only absolute height, but also a target height that is proportional to the content height.

clip defines whether the content outside of the animated bounds should be clipped. By default, clip is set to true, which only shows content in the animated bounds.

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandVertically
import androidx.compose.animation.shrinkVertically
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
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.unit.dp

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible,
    // Sets the initial height of the content to 20, revealing only the top of the content at
    // the beginning of the expanding animation.
    enter = expandVertically(expandFrom = Alignment.Top) { 20 },
    // Shrinks the content to half of its full height via an animation.
    exit = shrinkVertically(animationSpec = tween()) { fullHeight ->
        fullHeight / 2
    },
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp))
}
Parameters
@NonNull FiniteAnimationSpec<@NonNull IntSize> animationSpec

the animation used for the shrinking animation, spring by default.

@NonNull Alignment.Vertical shrinkTowards

the ending point of the shrinking bounds, Alignment.Bottom by default.

boolean clip

whether the content outside of the animated bounds should be clipped, true by default

@NonNull Function1<@NonNull Integer, @NonNull Integer> targetHeight

returns the end height of the shrinking bounds, 0 by default.

slideIn

public static final @NonNull EnterTransition slideIn(
    @NonNull FiniteAnimationSpec<@NonNull IntOffset> animationSpec,
    @NonNull Function1<@NonNull IntSize, @NonNull IntOffset> initialOffset
)

This slides in the content of the transition, from a starting offset defined in initialOffset to IntOffset(0, 0). The direction of the slide can be controlled by configuring the initialOffset. A positive x value means sliding from right to left, whereas a negative x value will slide the content to the right. Similarly positive and negative y values correspond to sliding up and down, respectively.

If the sliding is only desired horizontally or vertically, instead of along both axis, consider using slideInHorizontally or slideInVertically.

initialOffset is a lambda that takes the full size of the content and returns an offset. This allows the offset to be defined proportional to the full size, or as an absolute value.

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.tween
import androidx.compose.animation.slideIn
import androidx.compose.animation.slideOut
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible,
    enter = slideIn(tween(100, easing = LinearOutSlowInEasing)) { fullSize ->
        // Specifies the starting offset of the slide-in to be 1/4 of the width to the right,
        // 100 (pixels) below the content position, which results in a simultaneous slide up
        // and slide left.
        IntOffset(fullSize.width / 4, 100)
    },
    exit = slideOut(tween(100, easing = FastOutSlowInEasing)) {
        // The offset can be entirely independent of the size of the content. This specifies
        // a target offset 180 pixels to the left of the content, and 50 pixels below. This will
        // produce a slide-left combined with a slide-down.
        IntOffset(-180, 50)
    },
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp))
}
Parameters
@NonNull FiniteAnimationSpec<@NonNull IntOffset> animationSpec

the animation used for the slide-in, spring by default.

@NonNull Function1<@NonNull IntSize, @NonNull IntOffset> initialOffset

a lambda that takes the full size of the content and returns the initial offset for the slide-in

slideInHorizontally

public static final @NonNull EnterTransition slideInHorizontally(
    @NonNull FiniteAnimationSpec<@NonNull IntOffset> animationSpec,
    @NonNull Function1<@NonNull Integer, @NonNull Integer> initialOffsetX
)

This slides in the content horizontally, from a starting offset defined in initialOffsetX to 0 pixels. The direction of the slide can be controlled by configuring the initialOffsetX. A positive value means sliding from right to left, whereas a negative value would slide the content from left to right.

initialOffsetX is a lambda that takes the full width of the content and returns an offset. This allows the starting offset to be defined proportional to the full size, or as an absolute value. It defaults to return half of negative width, which would offset the content to the left by half of its width, and slide towards the right.

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)) {}
}
Parameters
@NonNull FiniteAnimationSpec<@NonNull IntOffset> animationSpec

the animation used for the slide-in, spring by default.

@NonNull Function1<@NonNull Integer, @NonNull Integer> initialOffsetX

a lambda that takes the full width of the content in pixels and returns the initial offset for the slide-in, by default it returns -fullWidth/2

slideInVertically

public static final @NonNull EnterTransition slideInVertically(
    @NonNull FiniteAnimationSpec<@NonNull IntOffset> animationSpec,
    @NonNull Function1<@NonNull Integer, @NonNull Integer> initialOffsetY
)

This slides in the content vertically, from a starting offset defined in initialOffsetY to 0 in pixels. The direction of the slide can be controlled by configuring the initialOffsetY. A positive initial offset means sliding up, whereas a negative value would slide the content down.

initialOffsetY is a lambda that takes the full Height of the content and returns an offset. This allows the starting offset to be defined proportional to the full height, or as an absolute value. It defaults to return half of negative height, which would offset the content up by half of its Height, and slide down.

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 FiniteAnimationSpec<@NonNull IntOffset> animationSpec

the animation used for the slide-in, spring by default.

@NonNull Function1<@NonNull Integer, @NonNull Integer> initialOffsetY

a lambda that takes the full Height of the content and returns the initial offset for the slide-in, by default it returns -fullHeight/2

slideOut

public static final @NonNull ExitTransition slideOut(
    @NonNull FiniteAnimationSpec<@NonNull IntOffset> animationSpec,
    @NonNull Function1<@NonNull IntSize, @NonNull IntOffset> targetOffset
)

This slides out the content of the transition, from an offset of IntOffset(0, 0) to the target offset defined in targetOffset. The direction of the slide can be controlled by configuring the targetOffset. A positive x value means sliding from left to right, whereas a negative x value would slide the content from right to left. Similarly, positive and negative y values correspond to sliding down and up, respectively.

If the sliding is only desired horizontally or vertically, instead of along both axis, consider using slideOutHorizontally or slideOutVertically.

targetOffset is a lambda that takes the full size of the content and returns an offset. This allows the offset to be defined proportional to the full size, or as an absolute value.

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.tween
import androidx.compose.animation.slideIn
import androidx.compose.animation.slideOut
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible,
    enter = slideIn(tween(100, easing = LinearOutSlowInEasing)) { fullSize ->
        // Specifies the starting offset of the slide-in to be 1/4 of the width to the right,
        // 100 (pixels) below the content position, which results in a simultaneous slide up
        // and slide left.
        IntOffset(fullSize.width / 4, 100)
    },
    exit = slideOut(tween(100, easing = FastOutSlowInEasing)) {
        // The offset can be entirely independent of the size of the content. This specifies
        // a target offset 180 pixels to the left of the content, and 50 pixels below. This will
        // produce a slide-left combined with a slide-down.
        IntOffset(-180, 50)
    },
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp))
}
Parameters
@NonNull FiniteAnimationSpec<@NonNull IntOffset> animationSpec

the animation used for the slide-out, spring by default.

@NonNull Function1<@NonNull IntSize, @NonNull IntOffset> targetOffset

a lambda that takes the full size of the content and returns the target offset for the slide-out

slideOutHorizontally

public static final @NonNull ExitTransition slideOutHorizontally(
    @NonNull FiniteAnimationSpec<@NonNull IntOffset> animationSpec,
    @NonNull Function1<@NonNull Integer, @NonNull Integer> targetOffsetX
)

This slides out the content horizontally, from 0 to a target offset defined in targetOffsetX in pixels. The direction of the slide can be controlled by configuring the targetOffsetX. A positive value means sliding to the right, whereas a negative value would slide the content towards the left.

targetOffsetX is a lambda that takes the full width of the content and returns an offset. This allows the target offset to be defined proportional to the full size, or as an absolute value. It defaults to return half of negative width, which would slide the content to the left by half of its width.

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)) {}
}
Parameters
@NonNull FiniteAnimationSpec<@NonNull IntOffset> animationSpec

the animation used for the slide-out, spring by default.

@NonNull Function1<@NonNull Integer, @NonNull Integer> targetOffsetX

a lambda that takes the full width of the content and returns the initial offset for the slide-in, by default it returns fullWidth/2

slideOutVertically

public static final @NonNull ExitTransition slideOutVertically(
    @NonNull FiniteAnimationSpec<@NonNull IntOffset> animationSpec,
    @NonNull Function1<@NonNull Integer, @NonNull Integer> targetOffsetY
)

This slides out the content vertically, from 0 to a target offset defined in targetOffsetY in pixels. The direction of the slide-out can be controlled by configuring the targetOffsetY. A positive target offset means sliding down, whereas a negative value would slide the content up.

targetOffsetY is a lambda that takes the full Height of the content and returns an offset. This allows the target offset to be defined proportional to the full height, or as an absolute value. It defaults to return half of the negative height, which would slide the content up by half of its Height.

Parameters
@NonNull FiniteAnimationSpec<@NonNull IntOffset> animationSpec

the animation used for the slide-out, spring by default.

@NonNull Function1<@NonNull Integer, @NonNull Integer> targetOffsetY

a lambda that takes the full Height of the content and returns the target offset for the slide-out, by default it returns fullHeight/2