A modern programming language that makes developers happier.

kotlinlang

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()
)```

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.

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?

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

Both having `fillMaxWidth()`

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 :sweat_smile:

```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(.......)
}```

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

Moved the alignment modifier from Divider to `AnimatedVisibility` and it worked