scaleOut

public fun scaleOut(
    animationSpec: FiniteAnimationSpec<Float> = spring(stiffness = Spring.StiffnessMediumLow),
    targetScale: Float = 0f,
    transformOrigin: TransformOrigin = TransformOrigin.Center,
): ExitTransition

This scales the content of the exit transition, from 1f to the target scale defined in targetScale. transformOrigin defines the pivot point in terms of fraction of the overall size. By default it's TransformOrigin.Center. scaleOut can be used in combination with any other type of ExitTransition using the plus operator (e.g. scaleOut() + fadeOut())

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. scaleOut can be combined with shrinkOut/shrinkHorizontally/shrinkVertically for coordinated layout size change animation. For example:

Parameters

Code Examples

ScaledEnterExit

@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))
            )
        }
    }
}