IssueTracker

Jetpack Compose version: 1.6.8

Jetpack Compose component used: AnimatedVisibility, animateFloatAsState, Modifier.graphicsLayer

There isn't an easy way to animate the alpha of Composables that have shadows applied via the shadow() modifier, or more generally Composables that draw outside of their bounds. As soon as the alpha is set to <1.0f, the Composable is clipped.

Offsets applied to the Composable also result in incorrect shadow rendering while the alpha is set to <1.0f.

Setting the CompositingStrategy doesn't offer a way to fix this, and

Steps to Reproduce or Code Sample to Reproduce:

With AnimatedVisibility:

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible = visible,
    enter = scaleIn() + fadeIn(),
    exit = scaleOut() + fadeOut(),
) {
    val shape = RoundedCornerShape(8.dp)
    Box(
        Modifier
            .offset(y = (-20).dp) // makes the issue more obvious
            .shadow(8.dp, shape = shape, clip = false)
            .background(Color.White, shape = shape)
            .width(350.dp)
            .height(100.dp)
    )
}

 LaunchedEffect(visible) {
   delay(2000)
   visible = !visible
}

Using graphicsLayer directly:

var visible by remember { mutableStateOf(true) }

val animatedScale by animateFloatAsState(if (visible) 1f else 0f)
val animatedAlpha by animateFloatAsState(if (visible) 1f else 0f)

val shape = RoundedCornerShape(8.dp)
Box(
    Modifier
        .graphicsLayer {
            scaleX = animatedScale
            scaleY = animatedScale
            alpha  = animatedAlpha
        }
        .shadow(8.dp, shape = shape, clip = false)
        .background(Color.Red, shape = shape)
        .width(350.dp)
        .height(100.dp)
)

LaunchedEffect(visible) {
    delay(2000)
    visible = !visible
}