A modern programming language that makes developers happier.

kotlinlang

A question about animations. I have a FAB that I would like to animate in using `AnimatedVisibility`  inside a box, so no row or column scope. It works alright but the clipping of how the animation opens up is a square. Meaning that it looks awkward as it comes into the screen especially since the shadows are looking weird. Is there a way to provide a clipping of how it should be expanded just like how I am passing that it should be expanding from the center?

Code looks something like this
```Box(Modifier.weight(1f)) {
    androidx.compose.animation.AnimatedVisibility(
        visible = isVisible,
        modifier = Modifier
            .padding(end = 8.dp, bottom = 8.dp)
            .requiredSize(56.dp),
        enter = fadeIn() + expandIn(
            expandFrom = Alignment.Center,
        ),
        exit = fadeOut() + shrinkOut(
            shrinkTowards = Alignment.Center
        ),
    ) {
        FloatingActionButton(
            onClick = { }
        ) {
            Text("Up!")
        }
    }
}```

Do you mean you would like to change the shape of the expansion? Or expand from a slightly different position than center?

Yeah the first one. The shape is square but it would be nice to expand as a circle instead for this case.

Have you tried adding a clip modifier with an animating shape to AnimatedVisibility?

```                AnimatedVisibility(
                    visible = isVisible,
                    modifier = Modifier
                        .padding(end = 8.dp, bottom = 8.dp).requiredSize(56.dp)
                        .wrapContentSize().clip(CircleShape), // &lt;------Add these two
                    enter = fadeIn() + expandIn(
                        expandFrom = Alignment.Center,
                    ),
                    exit = fadeOut() + shrinkOut(
                        shrinkTowards = Alignment.Center
                    ),
                ) {
                    FloatingActionButton(
                        onClick = { },
                    ) {
                        Text("Up!")
                    }
                }```

This would clip the shadow unfortunately. So you might need to add some padding in the FloatingActionButton to account for the shadow

Oh right of course. Thank you a lot for the help!

The Material Components library for the view system uses scale for the FAB enter/exit animations. I know scale animations are coming in Compose 1.1.0, but in the meantime, here is my implementation based on the animations from the Material Components library: <https://gist.github.com/joharei/2a4765f8fc39878a669f29055c1af1bc>

Nice! :slightly_smiling_face: Yes, if you use 1.1.0-alpha2, you could specify scale as a part of the enter/exit transition: `fadeIn/Out(..) + scaleIn/Out(animationSpec = tween(...))`

BTW, nested AnimatedVisibility with _exact same visible boolean_ could be simplified as one outer AnimatedVisibility and `Modifier.animateEnterExit`  for the inner one. The outer `AnimatedVisibilityScope` is accessible to non-direct children. It could be something like:
```AnimatedVisibility(....) {
   ...
   MaterialFloatingActionButton(
       modifier = otherModifier.animateEnterExit(enter = scaleIn(...), exit = scaleOut(...)),
       ...) {
           transition.animateFloat(...) {...}  // &lt;-----Accessing the outer AVScope's transition property
           content()
       }
}```

Aha, thanks for the tip! I'll update the gist after the weekend :ok_hand: