Skip to content
Kapow
Esc
↑↓navigate↵open⌘Jpreview
On this page

Transition: blob

An organic, wobbling blob grows from a point to reveal content, and shrinks to hide it.

Blob is a soft, liquid cousin of iris. The opening is a smooth outline through a few points that each swell and shrink as it grows. Use it for playful content, such as a chat bubble, a sticker or a reaction.

Usage

The sample grows a chat bubble out of its tail in the bottom right corner, and melts it back into the same corner.

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.graphics.TransformOrigin
import androidx.compose.ui.unit.dp
import com.jantursky.kapow.KapowAnimatedVisibility
import com.jantursky.kapow.KapowEnter
import com.jantursky.kapow.KapowExit

@Composable
fun Bubble(visible: Boolean) {
    KapowAnimatedVisibility(
        visible = visible,
        enter = KapowEnter.blob(origin = TransformOrigin(1f, 1f)),
        exit = KapowExit.blob(origin = TransformOrigin(1f, 1f)),
    ) {
        Box(Modifier.size(240.dp, 72.dp).background(Color.DarkGray))
    }
}

Parameters

Parameter Default Description
origin TransformOrigin.Center The point the blob grows from or shrinks to, as a fraction of the content’s size.
duration 600.milliseconds How long the transition takes. Must be positive.
points 9 How many points the outline runs through, from 4 to 32. More points give a more irregular outline.
wobble 0.25f How far each point swells and shrinks, as a share of its radius, from 0 (a plain circle) to 0.5. The bigger the wobble and the fewer the points, the further the blob has to grow to cover the content, so it covers it earlier than a plain circle would.
seed 53 The seed of the wobble. The same seed gives the same blob on every target.

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

  • Available as KapowEnter.blob() and KapowExit.blob(). The exit runs the enter in reverse.
  • The wobble is seeded, so it is the same on every run.
  • The blob grows a little past the farthest corner, enough that it covers the content even where it is narrowest.
  • The mask is drawn with an offscreen layer and a blend mode, so it works on all targets, including Android API 23.

Live example

Was this page helpful?