---
title: "Change: spin"
description: The element turns full circles and settles when a value changes.
---

Spin turns the element around an axis and lands it exactly where it started. Use it for a toggle that flipped or an icon that confirms an action.

## Usage

The sample turns a coin like a coin on a table each time the balance changes.

```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.ChangeEffect
import com.jantursky.kapow.SpinAxis
import com.jantursky.kapow.SpinRate
import com.jantursky.kapow.changeEffect

@Composable
fun Coin(balance: Int) {
    Box(
        Modifier
            .size(48.dp)
            .background(Color(0xFFFFB547), CircleShape)
            .changeEffect(balance, ChangeEffect.spin(axis = SpinAxis.Y, rate = SpinRate.Fast)),
    )
}
```

## Parameters

| Parameter | Default | Description |
| --- | --- | --- |
| `axis` | `SpinAxis.Y` | `X` flips top over bottom, `Y` turns like a coin on a table, `Z` turns like a wheel. |
| `rate` | `SpinRate.Default` | How fast the spin starts. `SpinRate.Fast` starts quicker. |
| `turns` | `null` | How many full turns a change makes. Null takes one for `SpinRate.Default` and two for `SpinRate.Fast`. Must be positive. |
| `duration` | `null` | How long the spin takes. Null lets a spring decide, which starts fast, overshoots and settles on its own. A duration replaces the spring with a plain animation along `easing`. |
| `easing` | `FastOutSlowInEasing` | The curve of the spin when there is a `duration`. |
| `reverse` | `false` | Spins the other way round. |
| `pivot` | `TransformOrigin.Center` | The point the element turns around, as fractions of its width and height. |
| `cameraDistance` | `12.dp` | How far the viewer is from the element. Closer makes the turn on X and Y more dramatic. Must be positive. |
| `shading` | `0.35f` | How much darker the element gets as it turns edge-on, from 0 (not at all) to 1. Z spins are never shaded. |
| `overshoot` | `0.35f` | How far the spring swings past its end and back, from 0 (settles smoothly) to 0.95. It applies when there is no `duration`. |

## Reduced motion

The element does not rotate. It brightens briefly. With `reducedMotion(ReducedMotionMode.EndState)` nothing shows at all, since the effect ends at rest.

## Notes

- The spin ends at a rotation of 0 degrees, so the element is back in its normal pose.
- A change while the element is still spinning adds a turn and speed instead of restarting.
- Around `X` or `Y` the element darkens a little as it turns edge-on, so the turn reads as a solid card.
- There is no cooldown.
- The rotation is applied to the element's layer, so it does not change layout. Neighbors do not move.

## Live example

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