---
title: "Transition: pop"
description: Content pops in with an overshoot, a ring and a burst of particles.
---

Pop is an enter only. Use it for a reward or a confirmation, such as a badge you just earned.

## Usage

The sample pops a badge in with a violet ring and particles.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
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

@Composable
fun Badge(visible: Boolean) {
    KapowAnimatedVisibility(
        visible = visible,
        enter = KapowEnter.pop(color = Color(0xFF6B62F2)),
    ) {
        Box(Modifier.size(96.dp).background(Color(0xFF6B62F2), CircleShape))
    }
}
```

## Parameters

| Parameter | Default | Description |
| --- | --- | --- |
| `color` | `Color(0xFF6B62F2)` | Color of the ring and particles. |
| `duration` | `1200.milliseconds` | How long the whole transition takes. Must be positive. |
| `overshoot` | `1f` | How far the content grows past its size before it settles, as a factor. 0 grows to its size without passing it. Must not be negative. |
| `ringCount` | `1` | How many rings go off one after another, from 0 to 5. |
| `particleCount` | `12` | How many particles burst out, from 0 to 100. |
| `physics` | `ParticlePhysics.Default` | How the burst launches and moves: direction, spread, speed, lifetime, gravity, drag, spin, size, scale and fade. The emission area, blend mode and color pick are ignored. |

Every transition also has `.delay(...)`, `.easing(...)` and `.reducedMotion(...)`. See [Stagger](/effects/transition-stagger).


## Reduced motion

The transition becomes a fade over the same duration or shorter. There are no particles and no movement.

## Notes

- Particles draw through a [particle layer](/guides/particle-layer) when one is above the element, so a clipping parent does not cut them off. Without one they draw around the element.
- The content scales in from nothing, overshoots its size and settles. A ring expands behind it and a ring of small particles bursts outward. All of it has faded by the end.
- There is no exit version. Pair it with an exit such as `KapowExit.poof()`.

## Live example

<iframe class="live-example" src="https://kapow-demo.vercel.app/#transition-pop" title="Live example: transition-pop" loading="lazy" allow="autoplay"></iframe>