Transition: blur
Content comes into focus as it fades in, and out of focus as it fades out.
Blur brings content from out of focus into focus while fading in, and the other way round on exit. Use it for photos, cards and anything that should feel like it arrives from a distance.
Usage
The sample brings a photo into focus as it appears.
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.jantursky.kapow.KapowAnimatedVisibility
import com.jantursky.kapow.KapowEnter
import com.jantursky.kapow.KapowExit
@Composable
fun Photo(visible: Boolean) {
KapowAnimatedVisibility(
visible = visible,
enter = KapowEnter.blur(),
exit = KapowExit.blur(),
) {
Box(Modifier.size(width = 180.dp, height = 110.dp).background(Color(0xFF3D7BFF)))
}
}Parameters
| Parameter | Default | Description |
|---|---|---|
duration |
500.milliseconds |
How long the transition takes. Must be positive. |
radius |
16.dp |
The blur radius the content starts (enter) or ends (exit) with. Must be positive. |
scale |
0.9f |
The size the content starts or ends at where the platform cannot blur, from 0.1 to 1. |
Every transition also has .delay(...), .easing(...) and .reducedMotion(...). See Stagger.
Reduced motion
The transition becomes a fade over the same duration or shorter. Nothing blurs.
Notes
- Layers can blur on Android 12 (API 31) and later, on iOS, on the JVM desktop and in the browser. Below Android 12 the transition fades and scales over the same duration, with no blur drawn.
- The blur radius shrinks to zero as the content fades in, so a finished enter is sharp. A large radius on a large element costs more to draw.
- The blur is applied to the content’s layer, so it does not change layout.