Does anyone know of a nice way to animate `shadow` without causing recompositions?

# compose

[Lucas Kivi]

Does anyone know of a nice way to animate shadow without causing recompositions?

[Zach Klippenstein (he/him) [MOD]]

You mean this shadow? The docs give you a hint

[Zach Klippenstein (he/him) [MOD]]

Use a graphics layer (either Modifier.graphicsLayer or placeWithLayer) and set shadowElevation

[Lucas Kivi]

Thank you for the response!

This is what I use now:

/**
 * A shadow [Modifier] that allows elevation changes to animate and skip recompositions.
 */
fun Modifier.shadow(
    clip: Boolean = false,
    shape: Shape = RectangleShape,
    ambientColor: Color = DefaultShadowColor,
    spotColor: Color = DefaultShadowColor,
    elevationProvider: () -> Dp,
): Modifier = graphicsLayer {
    val elevation = elevationProvider()
    // Do nothing if no shadow will be shown.
    if (elevation > 0.dp || clip) {
        this.shadowElevation = elevation.toPx()
        this.shape = shape
        this.clip = clip
        this.ambientShadowColor = ambientColor
        this.spotShadowColor = spotColor
    }
}

However something about this if statement in the compose.ui version fixes an issue where my shadow’s clips are interfering with each other when one disappears to `0.dp`:

) = if (elevation > 0.dp || clip) {
    this then ShadowGraphicsLayerElement(elevation, shape, clip, ambientColor, spotColor)
} else {
    this
}

This issue obviously only occurs when there are multiple shadows in the same real estate!

[Lucas Kivi]

sad panda