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

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


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


```kotlin
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

| | |
| --- | --- |
| animationSpec | the animation used for the expanding animation, `spring` by default. |
| expandFrom | the starting point of the expanding bounds, `Alignment.End` by default. |
| clip | whether the content outside of the animated bounds should be clipped, true by default |
| initialWidth | the start width of the expanding bounds, returning 0 by default. |




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