A modern programming language that makes developers happier.

kotlinlang

Is there a way to properly clip an `AnimatedVisibility` ? Clipping passed to the `AnimatedVisibility` modifier is not working and the animation runs with a square `.clip(CircleShape)`

Did you try to clip a content instead of `AnimatedVisibility`?

Yes everything is clipped animated and content. I've added the padding in the video to show it's properly applied.

`AnimatedVisibility` adds its clip and resizing modifier to the _front_ of the modifiers that you pass into AnimatedVisibility. So clipping the content or adding `.clip(CircleShape)` will behave the same, and neither will work as you expect.

Two potential solutions for your use case:

 1) Add a Box/Surface to AnimatedVisibility as its parent, and clip the parent.

or 2) Clip the AnimatedVisibility but putting the responsibility to animate on the its child:
```AnimatedVisibility(visible, modifier = Modifier.clip(CircleShape), enter = EnterTransition.None, exit = ExitTransition.None) {
    yourContent(Modifier.animateEnterExit(enter = .../*enter transition here*/, exit = ..))
}```

That's likely due to the incoming constraints having a minWidth/minHeight that is greater than the animated size. Could you try this:

```                    AnimatedVisibility(
                        visible,
                        enter = EnterTransition.None, exit = ExitTransition.None
                    ) {
                        YourContent(
                            Modifier
                                .wrapContentSize(Alignment.Center) // Add this
                                .clip(CircleShape) // and clip right before the animateEnterExit
                                .animateEnterExit()
                                .size(200.dp)
                                .background(Color.Red))
                    }```

Same result with
```    AnimatedVisibility(
        visible = visible,
        modifier = Modifier.fillMaxSize(),
        enter = EnterTransition.None, exit = ExitTransition.None
    ) {
        Box(
            modifier = Modifier
                .wrapContentSize(Alignment.Center)
                .clip(CircleShape)
                .animateEnterExit(
                    enter = fadeIn() + expandIn(expandFrom = Alignment.Center),
                    exit = shrinkOut(shrinkTowards = Alignment.Center) + fadeOut()
                )
                .size(300.dp)
                .background(MaterialTheme.colors.background)
        ) {
            Text(text = "AAA", modifier = Modifier.align(Alignment.Center))
        }
    }```
So not tied to the horologist time picker :disappointed:

I'm not seeing the "vibration" when experimenting with the code snippet you just shared on a phone. Haven't tried it on a wear emulator though.

I'll need to do more test tomorrow then :disappointed: But yes the target is round wear devices to have nice animations. This is mostly a detail, but when you see the square animation you can't unsee it :disappointed: