Hi all. I'm trying to achieve this animation but running into an issue (as you can see) where the fabs flashes out-of-bounds. Full

@Composable

in the 🧵

slideOutVertically

has a spring spec, try adjusting the stiffness of that or using a

tween

animationSpec for it instead.

ah that explains it - let me see if i can tweak tha

I saw a library that did this for compose I believe. Maybe it's worth searching GitHub a bit for it

With

slideIn

and

slideOut

, the content is offset-ed to achieve the animation. Therefore overlapping is somewhat expected. If you want to achieve no overlapping, I'd recommend

expandVertically

and

shrinkVertically

with

expandFrom/shrinkTowards

param set to

<http://Alignment.Top|Alignment.Top>

to achieve the effect in this gif.

thanks guys. Ended up fixing the clipping/flashing with some `expandIn`/`shrinkOut` Also, fullscreen expanding (exploding) fabs 💣

Well done! Love the container transform! Curious if there's any effect you couldn't achieve or found unnecessarily difficult? We would love to get some feedback if there's any, since container transform is something that we are still designing for. 🙂

As you can see in the screen recording above, the scaling transformation on the content looks little janky. Wish there was a better way to pull that off

Are you using

AnimatedContent

? Seems like knowing the current container size would help scale the content inside of it.

yeah i am,