Transition: wipe

A straight edge moves across content to reveal or hide it.

Wipe moves an edge across the content. Use it to swap pages or to reveal an image from one side.

Usage

The sample wipes a banner in from the left and out toward the left.

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 Banner(visible: Boolean) {
    KapowAnimatedVisibility(
        visible = visible,
        enter = KapowEnter.wipe(angle = 0f),
        exit = KapowExit.wipe(angle = 0f),
    ) {
        Box(Modifier.size(280.dp, 64.dp).background(Color.DarkGray))
    }
}

Parameters

Every transition also has .delay(...), .easing(...) and .reducedMotion(...). See Stagger.

Reduced motion

The transition becomes a fade over the same duration or shorter. There is no mask.

Notes

• On exit the edge moves against angle and covers the content.
• The mask works on all targets without blur or shaders.
• Glare is a wipe with a bright streak along the edge.

Live example