---
title: "animateContentSize"
description: "This modifier animates its own size when its child modifier (or the child composable if it is
already at the tail of the chain) changes size. This allows the parent modifier to observe a
smooth size change, resulting in an overall continuous visual change.

A [FiniteAnimationSpec] can be optionally specified for the size change animation. By default,
[spring] will be used.

An optional [finishedListener] can be supplied to get notified when the size change animation is
finished. Since the content size change can be dynamic in many cases, both initial value and
target value (i.e. final size) will be passed to the [finishedListener]. __Note:__ if the
animation is interrupted, the initial value will be the size at the point of interruption. This
is intended to help determine the direction of the size change (i.e. expand or collapse in x and
y dimensions)."
type: "modifier"
---

<div class='type'>Compose Modifier</div>

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


```kotlin
public fun Modifier.animateContentSize(
    animationSpec: FiniteAnimationSpec<IntSize> =
        spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntSize.VisibilityThreshold,
        ),
    finishedListener: ((initialValue: IntSize, targetValue: IntSize) -> Unit)? = null,
): Modifier
```


This modifier animates its own size when its child modifier (or the child composable if it is
already at the tail of the chain) changes size. This allows the parent modifier to observe a
smooth size change, resulting in an overall continuous visual change.

A `FiniteAnimationSpec` can be optionally specified for the size change animation. By default,
`spring` will be used.

An optional `finishedListener` can be supplied to get notified when the size change animation is
finished. Since the content size change can be dynamic in many cases, both initial value and
target value (i.e. final size) will be passed to the `finishedListener`. __Note:__ if the
animation is interrupted, the initial value will be the size at the point of interruption. This
is intended to help determine the direction of the size change (i.e. expand or collapse in x and
y dimensions).

#### Parameters

| | |
| --- | --- |
| animationSpec | a finite animation that will be used to animate size change, `spring` by default |
| finishedListener | an optional listener to be called when the content change animation is completed. |




<div class='sourceset sourceset-common'>Common</div>


```kotlin
public fun Modifier.animateContentSize(
    animationSpec: FiniteAnimationSpec<IntSize> =
        spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntSize.VisibilityThreshold,
        ),
    alignment: Alignment = Alignment.TopStart,
    finishedListener: ((initialValue: IntSize, targetValue: IntSize) -> Unit)? = null,
): Modifier
```


This modifier animates its own size when its child modifier (or the child composable if it is
already at the tail of the chain) changes size. This allows the parent modifier to observe a
smooth size change, resulting in an overall continuous visual change.

A `FiniteAnimationSpec` can be optionally specified for the size change animation. By default,
`spring` will be used.

An optional `finishedListener` can be supplied to get notified when the size change animation is
finished. Since the content size change can be dynamic in many cases, both initial value and
target value (i.e. final size) will be passed to the `finishedListener`. __Note:__ if the
animation is interrupted, the initial value will be the size at the point of interruption. This
is intended to help determine the direction of the size change (i.e. expand or collapse in x and
y dimensions).

#### Parameters

| | |
| --- | --- |
| animationSpec | a finite animation that will be used to animate size change, `spring` by default |
| alignment | sets the alignment of the content during the animation. `Alignment.TopStart` by default. |
| finishedListener | an optional listener to be called when the content change animation is completed. |




## Code Examples
### AnimateContent
```kotlin
@Composable
fun AnimateContent() {
    val shortText = "Hi"
    val longText = "Very long text\nthat spans across\nmultiple lines"
    var short by remember { mutableStateOf(true) }
    Box(
        modifier =
            Modifier.background(Color.Blue, RoundedCornerShape(15.dp))
                .clickable { short = !short }
                .padding(20.dp)
                .wrapContentSize()
                .animateContentSize()
    ) {
        Text(
            if (short) {
                shortText
            } else {
                longText
            },
            style = LocalTextStyle.current.copy(color = Color.White),
        )
    }
}
```