# SizeTransform

# SizeTransform

Artifact:[androidx.compose.animation:animation](https://developer.android.com/jetpack/androidx/releases/compose-animation)  
[View Source](https://cs.android.com/search?q=file:androidx/compose/animation/AnimatedContent.kt+class:androidx.compose.animation.SizeTransform)  
Added in[1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0)
Common/AllAndroid/JVM
  - Cmn  

  ```
  interface SizeTransform
  ```

*** ** * ** ***

[SizeTransform](https://developer.android.com/reference/kotlin/androidx/compose/animation/SizeTransform)defines how to transform from one size to another when the size of the content changes. When[clip](https://developer.android.com/reference/kotlin/androidx/compose/animation/SizeTransform#clip())is true, the content will be clipped to the animation size.[createAnimationSpec](https://developer.android.com/reference/kotlin/androidx/compose/animation/SizeTransform#createAnimationSpec(androidx.compose.ui.unit.IntSize,androidx.compose.ui.unit.IntSize))specifies the animation spec for the size animation based on the initial and target size.  

```kotlin
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedContentTransitionScope
import androidx.compose.animation.ContentTransform
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.core.keyframes
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.togetherWith
import androidx.compose.ui.unit.IntSize

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

## Summary

|                                                                                                   ### Public functions                                                                                                    |
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----|
| [FiniteAnimationSpec](https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec)`<`[IntSize](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize)`>` | [createAnimationSpec](https://developer.android.com/reference/kotlin/androidx/compose/animation/SizeTransform#createAnimationSpec(androidx.compose.ui.unit.IntSize,androidx.compose.ui.unit.IntSize))`(initialSize: `[IntSize](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize)`, targetSize: `[IntSize](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize)`)` This allows[FiniteAnimationSpec](https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec)to be defined based on the[initialSize](https://developer.android.com/reference/kotlin/androidx/compose/animation/SizeTransform#createAnimationSpec(androidx.compose.ui.unit.IntSize,androidx.compose.ui.unit.IntSize))before the size animation and the[targetSize](https://developer.android.com/reference/kotlin/androidx/compose/animation/SizeTransform#createAnimationSpec(androidx.compose.ui.unit.IntSize,androidx.compose.ui.unit.IntSize))of the animation. | Cmn |

|                                ### Public properties                                |
|-------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----|
| [Boolean](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) | [clip](https://developer.android.com/reference/kotlin/androidx/compose/animation/SizeTransform#clip()) Whether the content should be clipped using the animated size. | Cmn |

## Public functions

### createAnimationSpec

Cmn  
Added in[1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.10.0)  

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

This allows[FiniteAnimationSpec](https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec)to be defined based on the[initialSize](https://developer.android.com/reference/kotlin/androidx/compose/animation/SizeTransform#createAnimationSpec(androidx.compose.ui.unit.IntSize,androidx.compose.ui.unit.IntSize))before the size animation and the[targetSize](https://developer.android.com/reference/kotlin/androidx/compose/animation/SizeTransform#createAnimationSpec(androidx.compose.ui.unit.IntSize,androidx.compose.ui.unit.IntSize))of the animation.

## Public properties

### clip

Cmn  
Added in[1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0)  

```
val clip: Boolean
```

Whether the content should be clipped using the animated size.