https://kotlinlang.org logo
Title
x

xxfast

05/23/2022, 12:53 AM
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 🧵
I'm making use of
AnimatedVisibility
with animation dsl to
slideIn
and
slideOut
these children
Any thoughts as to what im doing wrong, or is this a compose bug? 🤔
a

Afzal Najam

05/23/2022, 4:54 AM
slideOutVertically
has a spring spec, try adjusting the stiffness of that or using a
tween
animationSpec for it instead.
1
x

xxfast

05/23/2022, 7:52 AM
ah that explains it - let me see if i can tweak tha
r

Rafael Costa

05/23/2022, 6:41 PM
I saw a library that did this for compose I believe. Maybe it's worth searching GitHub a bit for it
d

Doris Liu

05/23/2022, 10:01 PM
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.
x

xxfast

05/26/2022, 4:23 AM
thanks guys. Ended up fixing the clipping/flashing with some `expandIn`/`shrinkOut` Also, fullscreen expanding (exploding) fabs 💣
😍 2
d

Doris Liu

05/26/2022, 5:43 PM
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. 🙂
x

xxfast

05/27/2022, 2:00 AM
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
d

Doris Liu

05/27/2022, 3:57 AM
Are you using
AnimatedContent
? Seems like knowing the current container size would help scale the content inside of it.
x

xxfast

05/27/2022, 5:16 AM
yeah i am,