slideInHorizontally

public fun slideInHorizontally(
    animationSpec: FiniteAnimationSpec<IntOffset> =
        spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntOffset.VisibilityThreshold,
        ),
    initialOffsetX: (fullWidth: Int) -> Int = { -it / 2 },
): EnterTransition

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.

Parameters

Code Examples

SlideTransition

@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)) {}
    }
}