How can i create a ExpandHorizontal animation which expands on both sides expanding from the center?...

# compose

[Vaibhav Jaiswal]

How can i create a ExpandHorizontal animation which expands on both sides expanding from the center?
Tried this but it still expands from the start

AnimatedVisibility(
    visible = activeTabConfig == tab,
    enter = fadeIn() + expandHorizontally(expandFrom = Alignment.CenterHorizontally),
    exit = shrinkHorizontally(shrinkTowards = Alignment.CenterHorizontally) + fadeOut()
)

[Stylianos Gakis]

How does it actually look like?
I’ve had a case where it was doing what I wanted it, but didn’t realize till I added clip = false and saw it really do what I wanted.

[Vaibhav Jaiswal]

It expands left to right

[Stylianos Gakis]

Is it that the size it was occupying before was too small already, so as the new content comes in, you don’t see just your animation, but also the container itself trying to expand to cover the right size?

[Vaibhav Jaiswal]

Its an indicator made using Divider
Shown on top of bottom nav item

Both having fillMaxWidth()

[Stylianos Gakis]

I feel like we’ve had this conversation before, how it’s impossible to understand such animation related problems without actually looking at the thing we are talking about 😅

[Vaibhav Jaiswal]

Box(modifier = Modifier.weight(1f)) {
        androidx.compose.animation.AnimatedVisibility(
            visible = activeTabConfig == tab,
            enter = fadeIn() + expandHorizontally(expandFrom = Alignment.CenterHorizontally),
            exit = shrinkHorizontally(shrinkTowards = Alignment.CenterHorizontally) + fadeOut()
        ) {
            Divider(
                color = MaterialTheme.colorScheme.onPrimaryContainer,
                thickness = 3.dp,
                modifier = Modifier.fillMaxWidth().align(Alignment.TopCenter)
            )
        }

        NavigationBarItem(.......)
}

[Stylianos Gakis]

I was thinking of a recording too

[Vaibhav Jaiswal]

Screen Recording 2024-03-11 at 7.55.36 PM.mov

Screen Recording 2024-03-11 at 7.55.36 PM.mov

[Vaibhav Jaiswal]

Moved the alignment modifier from Divider to AnimatedVisibility and it worked

[Vaibhav Jaiswal]

Thanks for assisting

[Stylianos Gakis]

rubber duck