Easing for a value change (number swap): curve, duration and what to avoid
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.
Demo
swap
1,2845
The same move with swap and with linear. If your system asks for reduced motion, nothing plays and the final state shows.
Ease and duration
- Ease
- swappeak speed 4x the average
- Duration
- 0.15 s out, 0.26 s in
- Halfway at
- 50% of the time90% of the travel at 68%
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.
Code
@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;
}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' },
);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);import { EASE } from '../../core/motion/presets.js';
el.animate(keyframes, { duration: 260, easing: EASE.swap, fill: 'both' });Measured source
Measured on ChatGPT and Vercel Analytics clips at 30 fps, read off frames, plus or minus 33 ms. The numbers live in UI, imported from core/motion/presets.js.
| 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. |