Any idea to implement this blur animation when expanding the card?

# compose

[AmrJyniat]

Any idea to implement this blur animation when expanding the card?

Screenshare - 2022-09-01 4:08:13 PM.webm

[Rebecca Franks]

In general, blurring is an expensive operation, so animating it is probably not the most efficient thing you can do 😄 You could try using Modifier.graphicsLayer and setting a render effect to use blur, and only apply the modifier to the content below. This only works on 31+ though

@RequiresApi(Build.VERSION_CODES.S)
fun Modifier.blur(): Modifier = then(
    graphicsLayer {

        renderEffect = RenderEffect.createBlurEffect(10f, 10f, Shader.TileMode.CLAMP)
            .asComposeRenderEffect()
    }
)

[Rebecca Franks]

There is also the standard blur functions that you can use - they do the same thing but also only work on android 12 and up https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).blu[…]mpose.ui.draw.BlurredEdgeTreatment)

[Rebecca Franks]

If you progressively change the blur radius as the animation it should progressively blur the content, but like i said - very expensive operation to do.