---
title: "scaleIn"
description: "This scales the content as it appears, from an initial scale (defined in [initialScale]) to 1f.
[transformOrigin] defines the pivot point in terms of fraction of the overall size.
[TransformOrigin.Center] by default. [scaleIn] can be used in combination with any other type of
[EnterTransition] using the plus operator (e.g. `scaleIn() + slideInHorizontally()`)

Note: Scale is applied __before__ slide. This means when using [slideIn]/[slideOut] with
[scaleIn]/[scaleOut], the amount of scaling needs to be taken into account when sliding.

The scaling will change the visual of the content, but will __not__ affect the layout size.
[scaleIn] can be combined with [expandIn]/[expandHorizontally]/[expandVertically] to coordinate
layout size change while scaling. For example:"
type: "function"
---

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


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


```kotlin
public fun scaleIn(
    animationSpec: FiniteAnimationSpec<Float> = spring(stiffness = Spring.StiffnessMediumLow),
    initialScale: Float = 0f,
    transformOrigin: TransformOrigin = TransformOrigin.Center,
): EnterTransition
```


This scales the content as it appears, from an initial scale (defined in `initialScale`) to 1f.
`transformOrigin` defines the pivot point in terms of fraction of the overall size.
`TransformOrigin.Center` by default. `scaleIn` can be used in combination with any other type of
`EnterTransition` using the plus operator (e.g. `scaleIn() + slideInHorizontally()`)

Note: Scale is applied __before__ slide. This means when using `slideIn`/`slideOut` with
`scaleIn`/`scaleOut`, the amount of scaling needs to be taken into account when sliding.

The scaling will change the visual of the content, but will __not__ affect the layout size.
`scaleIn` can be combined with `expandIn`/`expandHorizontally`/`expandVertically` to coordinate
layout size change while scaling. For example:

#### Parameters

| | |
| --- | --- |
| animationSpec | the animation used for the scale-out, `spring` by default. |
| initialScale | the initial scale for the enter transition, 0 by default. |
| transformOrigin | the pivot point in terms of fraction of the overall size. By default it's `TransformOrigin.Center`. |




## Code Examples
### ScaledEnterExit
```kotlin
@OptIn(ExperimentalAnimationApi::class)
@Composable
fun ScaledEnterExit() {
    Column {
        var showRed by remember { mutableStateOf(true) }
        var showGreen by remember { mutableStateOf(true) }
        AnimatedVisibility(
            visible = showGreen,
            // By Default, `scaleIn` uses the center as its pivot point. When used with a vertical
            // expansion from the vertical center, the content will be growing from the center of
            // the vertically expanding layout.
            enter = scaleIn() + expandVertically(expandFrom = Alignment.CenterVertically),
            // By Default, `scaleOut` uses the center as its pivot point. When used with an
            // ExitTransition that shrinks towards the center, the content will be shrinking both
            // in terms of scale and layout size towards the center.
            exit = scaleOut() + shrinkVertically(shrinkTowards = Alignment.CenterVertically),
        ) {
            Box(
                Modifier.size(100.dp)
                    .background(color = Color.Green, shape = RoundedCornerShape(20.dp))
            )
        }
        AnimatedVisibility(
            visible = showRed,
            // Scale up from the TopLeft by setting TransformOrigin to (0f, 0f), while expanding the
            // layout size from Top start and fading. This will create a coherent look as if the
            // scale is impacting the size.
            enter =
                scaleIn(transformOrigin = TransformOrigin(0f, 0f)) +
                    fadeIn() +
                    expandIn(expandFrom = Alignment.TopStart),
            // Scale down from the TopLeft by setting TransformOrigin to (0f, 0f), while shrinking
            // the layout towards Top start and fading. This will create a coherent look as if the
            // scale is impacting the layout size.
            exit =
                scaleOut(transformOrigin = TransformOrigin(0f, 0f)) +
                    fadeOut() +
                    shrinkOut(shrinkTowards = Alignment.TopStart),
        ) {
            Box(
                Modifier.size(100.dp)
                    .background(color = Color.Red, shape = RoundedCornerShape(20.dp))
            )
        }
    }
}
```