expandHorizontally

public fun expandHorizontally(
    animationSpec: FiniteAnimationSpec<IntSize> =
        spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntSize.VisibilityThreshold,
        ),
    expandFrom: Alignment.Horizontal = Alignment.End,
    clip: Boolean = true,
    initialWidth: (fullWidth: Int) -> Int = { 0 },
): EnterTransition

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.

Parameters

Code Examples

HorizontalTransitionSample

@Composable
fun HorizontalTransitionSample() {
    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))
    }
}