slideOut

public fun slideOut(
    animationSpec: FiniteAnimationSpec<IntOffset> =
        spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntOffset.VisibilityThreshold,
        ),
    targetOffset: (fullSize: IntSize) -> IntOffset,
): ExitTransition

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.

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