is anyone aware of some sample code for the button animation featured here: <https://material.io/blo...

# compose

[Nat Strangerweather]

is anyone aware of some sample code for the button animation featured here: https://material.io/blog/jetpack-compose-beta. I am talking about the top left one.

[Nat Strangerweather]

I have pretty much managed to recreate it but my round button enters and exits to the top left corner of my rectangle button.

[Nat Strangerweather]

I'd love to see where I am going wrong.

Crossfade(
                targetState = scene, animationSpec = tween(
                    durationMillis = 4000, easing = LinearOutSlowInEasing
                )
            ) { scene ->
                when (scene) {
                    Scene.TextButton -> {
                        AnimatedVisibility(
                            visible = visible,
                            enter = expandHorizontally(
                                expandFrom = Alignment.CenterHorizontally,
                                animationSpec = tween(2000)
                            ),
                            exit = shrinkHorizontally(
                                shrinkTowards = Alignment.CenterHorizontally,
                                animationSpec = tween(2000)
                            ),
                        ) {
                            TextButton()
                        }
                    }
                    Scene.IconButton ->
                        IconButton(size)
                }

[Nat Strangerweather]

And

val size by animateDpAsState(
        targetValue = if (small) 0.dp else 100.dp,
        animationSpec = tween(durationMillis = 2000)
    )

Unless someone might be able to tell me? 😊

[Nat Strangerweather]

This is what I mean

[dbaelz]

You could wrap the Text and button into a Row with verticalAlignment = Alignment.CenterVertically. That should do the trick.

[Nat Strangerweather]

Oh, thanks for this! Why did I not think of it!