slideIn

public fun slideIn(
    animationSpec: FiniteAnimationSpec<IntOffset> =
        spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntOffset.VisibilityThreshold,
        ),
    initialOffset: (fullSize: IntSize) -> IntOffset,
): EnterTransition

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.

Parameters

Code Examples

SlideInOutSample

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