A modern programming language that makes developers happier.

kotlinlang

Good day everyone. I’m just playing around with compose and was hoping to get some help with animations. Specifically animating between two composables when state has changed.
I’m trying to animate using two `AnimatedVisibility` composables like here to slide in/out the composables
My issue is that only the top `AnimatedVisibility` plays the animation. I would like to play them both in parallel so it looks like a seamless sliding in and out transition like a viewPager. Thanks!

device-2021-03-20-122653.mp4

<@U01S18ST22Y> can you put your code in the thread, please :smile: ?

<https://kotlinlang.slack.com/archives/CJLTWPH7S/p1615303547114200>

My bad! edited my post. Thanks :slightly_smiling_face:
```            Row {
                AnimatedVisibility(
                    visible = formState.value == FormState.TIME,
                    enter = slideInHorizontally(
                        { it },
                        animationSpec = tween()
                    ),
                    exit = slideOutHorizontally(
                        { it },
                        animationSpec = tween()
                    )
                ) {
                    EnterTime()
                }

                AnimatedVisibility(
                    visible = formState.value == FormState.NAME,
                    enter = slideInHorizontally(
                        { -it },
                        animationSpec = tween()
                    ),
                    exit = slideOutHorizontally(
                        { -it },
                        animationSpec = tween()
                    )
                ) {
                    EnterName(
                        text = name,
                        onNameChange = { name = it }
                    )
                }
            }```

Have you tried putting the two `AnimatedVisibilty` in a Box instead of a Row?

The reason why it won't work when they are in a `Row` is that if both children want to lay out to be the same size as the parent, the 2nd child will be allocated 0 size, until the first child gets removed from the tree.

That's what the video showed: During the time that the first `AnimatedVisiblity` is animating out, the 2nd one reports its width to be 0, and only snaps to the full size when the previous `AnimatedVisibility` has finished its animation.

Yes! thank you for the great explanation, that’s makes sense. Putting them in `Box` worked :slightly_smiling_face:

<@U01S18ST22Y> can you post a video of the fix? Curious on how this ended up looking :smile:

device-2021-03-20-141407.mp4

<@UN85K2RQR> Sure, here it is :slightly_smiling_face: It still needs more refining, as you may notice the “Enter Name” view jumps a bit when entering from left.
edit: Fixed the slide in from left “jumping” by removing unnecessary start padding

<@U01S18ST22Y> The jump is a known issue with `fadeIn` that was fixed in beta03. Just so you don't spend a bunch of time debugging it. :slightly_smiling_face:  For now you could work around that by offsetting the slideIn a little more so it starts from off screen.