# Easing for a value change (number swap): curve, duration

> Use swap for a value change (number swap), over 0.15 s out, 0.26 s in. Avoid a spring on a number: it shows a figure that is not true.

Canonical: https://vawe.dev/easing/for/number-change
Last updated: 2026-11-04

Use swap for a value change (number swap), over 0.15 s out, 0.26 s in. swap reaches 50% of its travel at 50% of the time and 90% at 68%. Avoid a spring on a number: it shows a figure that is not true.

| Measure | Value |
| --- | --- |
| Job | Value change (number swap) |
| Ease | swap (https://vawe.dev/easing/swap) |
| Duration | 0.15 s out, 0.26 s in |

## What to avoid

A spring on a number: it shows a figure that is not true. Roll each digit in its own slot; never half of two readings.

## CSS

```css
@keyframes roll-in {
  from { opacity: 0; translate: 0 0.8vh; }
  to { opacity: 1; translate: 0 0; }
}

.target {
  animation: roll-in 260ms cubic-bezier(0.75, 0, 0.25, 1) both;
}
```

## Web Animations

```js
el.animate(
  [{ opacity: '0', translate: '0 0.8vh' }, { opacity: '1', translate: '0 0' }],
  { duration: 260, easing: 'cubic-bezier(0.75, 0, 0.25, 1)', fill: 'both' },
);
```

## CSS linear()

```css
animation-timing-function: linear(0, 0.0001, 0.0004, 0.0009, 0.0016, 0.0025, 0.0037, 0.0051, 0.0067, 0.0087, 0.0109, 0.0135, 0.0163, 0.0196, 0.0232, 0.0272, 0.0316, 0.0364, 0.0418, 0.0477, 0.0542, 0.0613, 0.0691, 0.0777, 0.087, 0.0973, 0.1087, 0.1211, 0.1349, 0.1501, 0.167, 0.1858, 0.2069, 0.2305, 0.2572, 0.2873, 0.3215, 0.3601, 0.4033, 0.4504, 0.5, 0.5496, 0.5967, 0.6399, 0.6785, 0.7127, 0.7428, 0.7695, 0.7931, 0.8142, 0.833, 0.8499, 0.8651, 0.8789, 0.8913, 0.9027, 0.913, 0.9223, 0.9309, 0.9387, 0.9458, 0.9523, 0.9582, 0.9636, 0.9684, 0.9728, 0.9768, 0.9804, 0.9837, 0.9865, 0.9891, 0.9913, 0.9933, 0.9949, 0.9963, 0.9975, 0.9984, 0.9991, 0.9996, 0.9999, 1);
```

## Measured source

Measured on ChatGPT and Vercel Analytics clips at 30 fps, read off frames, plus or minus 33 ms.

| Preset | Value | Measured |
| --- | --- | --- |
| Digit roll | 150 ms out, 260 ms in, rise 0.8vh | A digit or label rolls in its own clipped slot, never half of two readings. |

## Video components for this job

- [Split-flap resolve](https://vawe.dev/video-components/flap-resolve)
- [Text scramble decode](https://vawe.dev/video-components/text-scramble-decode)
- [Word swap slot](https://vawe.dev/video-components/word-swap-slot)
- [Strikethrough replace](https://vawe.dev/video-components/strikethrough-replace)

## Other jobs

- [Title or text entrance](https://vawe.dev/easing/for/title-entrance)
- [UI panel or card in](https://vawe.dev/easing/for/panel-entrance)
- [List stagger](https://vawe.dev/easing/for/list-stagger)
- [Small pop or notification](https://vawe.dev/easing/for/notification-pop)
- [Exit](https://vawe.dev/easing/for/exit)
- [Camera move under 2 s](https://vawe.dev/easing/for/short-camera-move)
- [Camera move of 2 s or more](https://vawe.dev/easing/for/long-camera-move)
- [Scan or wipe travel](https://vawe.dev/easing/for/scan-wipe)
- [Hold drift](https://vawe.dev/easing/for/hold-drift)
- [Send, small arrival](https://vawe.dev/easing/for/send-bubble)
- [Typing](https://vawe.dev/easing/for/typing)
- [Stream](https://vawe.dev/easing/for/text-streaming)

## Related

- [All easing functions](https://vawe.dev/easing)
- [swap](https://vawe.dev/easing/swap)