Hi all. I'm trying to achieve this animation but running into an issue (as you can see) where the fa...

# compose

[xxfast]

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 🧵

[xxfast]

FabGroup_kt.kt

[xxfast]

I'm making use of AnimatedVisibility with animation dsl to slideIn and slideOut these children

[xxfast]

Any thoughts as to what im doing wrong, or is this a compose bug? 🤔

[Afzal Najam]

slideOutVertically has a spring spec, try adjusting the stiffness of that or using a tween animationSpec for it instead.

[xxfast]

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

[Rafael Costa]

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

[Doris Liu]

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.

[xxfast]

thanks guys. Ended up fixing the clipping/flashing with some `expandIn`/`shrinkOut`

Also, fullscreen expanding (exploding) fabs 💣

exploading fabs slowmotion.mov

[Doris Liu]

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. 🙂

[xxfast]

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

[Doris Liu]

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

[xxfast]

yeah i am,