---
title: "SizeTransform"
description: "[SizeTransform] defines how to transform from one size to another when the size of the content
changes. When [clip] is true, the content will be clipped to the animation size.
[createAnimationSpec] specifies the animation spec for the size animation based on the initial
and target size."
type: "interface"
---

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


<a id='references'></a>

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



```kotlin
public interface SizeTransform
```


`SizeTransform` defines how to transform from one size to another when the size of the content
changes. When `clip` is true, the content will be clipped to the animation size.
`createAnimationSpec` specifies the animation spec for the size animation based on the initial
and target size.


## Functions

```kotlin
public fun createAnimationSpec(
        initialSize: IntSize,
        targetSize: IntSize,
    ): FiniteAnimationSpec<IntSize>
```


This allows `FiniteAnimationSpec` to be defined based on the `initialSize` before the size
animation and the `targetSize` of the animation.



## Code Examples

### AnimatedContentTransitionSpecSample
```kotlin
@Suppress("UNUSED_VARIABLE")
fun AnimatedContentTransitionSpecSample() {
    // enum class CartState { Expanded, Collapsed }
    val transitionSpec: AnimatedContentTransitionScope<CartState>.() -> ContentTransform = {
        // Fade in with a delay so that it starts after fade out
        fadeIn(animationSpec = tween(150, delayMillis = 150))
            .togetherWith(fadeOut(animationSpec = tween(150)))
            .using(
                SizeTransform { initialSize, targetSize ->
                    // Using different SizeTransform for different state change
                    if (CartState.Collapsed isTransitioningTo CartState.Expanded) {
                        keyframes {
                            durationMillis = 500
                            // Animate to full target width and by 200px in height at 150ms
                            IntSize(targetSize.width, initialSize.height + 200) at 150
                        }
                    } else {
                        keyframes {
                            durationMillis = 500
                            // Animate 1/2 the height without changing the width at 150ms.
                            // The width and rest of the height will be animated in the
                            // timeframe between 150ms and duration (i.e. 500ms)
                            IntSize(
                                initialSize.width,
                                (initialSize.height + targetSize.height) / 2,
                            ) at 150
                        }
                    }
                }
            )
    }
}
```