Send animation: the spring for a small arrival
Use a spring with stiffness 500 and damping 25 for a sent message or small arrival. It settles in 0.39 s. A sent bubble in a real product overshoots 11 to 14 percent; the spring gives 12 percent. Avoid a large panel or any text block: overshoot is for small, fast arrivals of 3 to 20 px.
Demo
The spring, then linear for comparison. If your system asks for reduced motion, nothing plays and the final state shows.
Duration
- Duration
- 0.39 s to settle, overshoot 12%
A spring has no cubic-bezier form, so the linear() string follows it. For an item that moves more than 20 px, see the pop page.
What to avoid
A large panel or any text block: overshoot is for small, fast arrivals of 3 to 20 px. A counter never springs.
Code
@keyframes arrive {
from { scale: 0; }
to { scale: 1; }
}
.target {
animation: arrive 565ms linear(0, 0.0441, 0.1548, 0.303, 0.4652, 0.6237, 0.7665, 0.8862, 0.9798, 1.0472, 1.0906, 1.1136, 1.1203, 1.1149, 1.1016, 1.0837, 1.0642, 1.0452, 1.028, 1.0136, 1.0024, 0.9943, 0.9891, 0.9863, 0.9855, 0.9862, 0.9878, 0.9899, 0.9923, 0.9946, 0.9966, 0.9984, 0.9997, 1.0007, 1.0013, 1.0016, 1.0017, 1.0017, 1.0015, 1.0012, 1) both;
}el.animate(
[{ scale: '0' }, { scale: '1' }],
{ duration: 565, easing: 'linear(0, 0.0441, 0.1548, 0.303, 0.4652, 0.6237, 0.7665, 0.8862, 0.9798, 1.0472, 1.0906, 1.1136, 1.1203, 1.1149, 1.1016, 1.0837, 1.0642, 1.0452, 1.028, 1.0136, 1.0024, 0.9943, 0.9891, 0.9863, 0.9855, 0.9862, 0.9878, 0.9899, 0.9923, 0.9946, 0.9966, 0.9984, 0.9997, 1.0007, 1.0013, 1.0016, 1.0017, 1.0017, 1.0015, 1.0012, 1)', fill: 'both' },
);import { UI } from '../../core/motion/presets.js';
// UI.send: { k: 500, d: 25 }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 |
|---|---|---|
| Send | spring k 500, d 25 | A sent bubble overshoots 11 to 14 percent (x1.11 in 0.1 s). The spring gives 12 percent. |
| Snap | overshoot 9 to 20% | Overshoot is a snap on small, fast arrivals (3 to 20 px). A large panel does not overshoot. |