---
title: "slideOutHorizontally"
description: "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."
type: "function"
---

<div class='type'>Function</div>


<a id='references'></a>
<div class='sourceset sourceset-common'>Common</div>


```kotlin
public fun slideOutHorizontally(
    animationSpec: FiniteAnimationSpec<IntOffset> =
        spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntOffset.VisibilityThreshold,
        ),
    targetOffsetX: (fullWidth: Int) -> Int = { -it / 2 },
): ExitTransition
```


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.

#### Parameters

| | |
| --- | --- |
| animationSpec | the animation used for the slide-out, `spring` by default. |
| 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` |




## Code Examples
### SlideTransition
```kotlin
@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)) {}
    }
}
```