react-spring default
It is the config a spring gets when you pass none. The numbers equal vawe default. Stiffness 170, damping 26 and mass 1 give a damping ratio of 0.997, so the spring is about critically damped. It settles to within 0.1% in 0.705 s. It never passes the end value.
Demo
Both boxes take 0.705 s. Playing at 0.5× speed.
Your system asks for reduced motion, so nothing plays. The chart shows the whole move.
Code
A spring has no fixed duration, so the CSS takes the settle time (705 ms) and a linear() string that follows the spring.
transition: translate 705ms linear(0, 0.0061, 0.0227, 0.0474, 0.0783, 0.1137, 0.1523, 0.193, 0.2349, 0.2772, 0.3193, 0.3609, 0.4015, 0.4408, 0.4787, 0.5149, 0.5495, 0.5823, 0.6132, 0.6424, 0.6699, 0.6956, 0.7196, 0.742, 0.7629, 0.7823, 0.8003, 0.8169, 0.8323, 0.8466, 0.8597, 0.8718, 0.8829, 0.8931, 0.9025, 0.9111, 0.919, 0.9263, 0.9329, 0.939, 0.9445, 0.9495, 0.9542, 0.9584, 0.9622, 0.9657, 0.9689, 0.9718, 0.9744, 0.9768, 0.979, 0.981, 0.9828, 0.9844, 0.9859, 0.9873, 0.9885, 0.9896, 0.9906, 0.9915, 0.9923, 0.9931, 0.9937, 0.9943, 0.9949, 0.9954, 0.9958, 0.9963, 0.9966, 0.997, 0.9973, 0.9975, 0.9978, 0.998, 0.9982, 0.9984, 0.9985, 0.9987, 0.9988, 0.9989, 1);el.animate({ translate: ['0 0', '240px 0'] }, { duration: 705, easing: 'linear(0, 0.0061, 0.0227, 0.0474, 0.0783, 0.1137, 0.1523, 0.193, 0.2349, 0.2772, 0.3193, 0.3609, 0.4015, 0.4408, 0.4787, 0.5149, 0.5495, 0.5823, 0.6132, 0.6424, 0.6699, 0.6956, 0.7196, 0.742, 0.7629, 0.7823, 0.8003, 0.8169, 0.8323, 0.8466, 0.8597, 0.8718, 0.8829, 0.8931, 0.9025, 0.9111, 0.919, 0.9263, 0.9329, 0.939, 0.9445, 0.9495, 0.9542, 0.9584, 0.9622, 0.9657, 0.9689, 0.9718, 0.9744, 0.9768, 0.979, 0.981, 0.9828, 0.9844, 0.9859, 0.9873, 0.9885, 0.9896, 0.9906, 0.9915, 0.9923, 0.9931, 0.9937, 0.9943, 0.9949, 0.9954, 0.9958, 0.9963, 0.9966, 0.997, 0.9973, 0.9975, 0.9978, 0.998, 0.9982, 0.9984, 0.9985, 0.9987, 0.9988, 0.9989, 1)', fill: 'both' });import { spring, springDuration, springLinear } from '../../core/motion/springs.js';
const k = 170, d = 26;
// per-frame code (window.seek, vawe.onFrame): t is seconds since the move starts
const x = 240 * spring(t, k, d);
// CSS and Web Animations: 705 ms, the linear() string above
el.animate(
{ translate: ['0 0', '240px 0'] },
{ duration: springDuration(k, d) * 1000, easing: springLinear(k, d), fill: 'both' },
);Numbers
- Stiffness
- 170k, with mass 1
- Damping
- 26d, with mass 1
- Damping ratio
- 0.997about critically damped
- Settle time
- 0.705 swithin 0.1% of the end
- Overshoot
- 0%stays inside the end
- Crosses the end
- 0times
- 50% of travel
- 0.129 s18% of the settle time
- 90% of travel
- 0.298 s42% of the settle time
- Natural frequency
- 13.04 rad/ssqrt(k)
- Ring period
- 6.283 sone swing of the overshoot
- Peak speed
- 3.38xtimes the average speed
- linear() points
- 81within 0.15% of travel
Computed with spring() and springDuration() from core/motion/springs.js. The settle time is the last moment the spring is more than 0.1% away from the end value; a library stops its own spring by its own rest thresholds, so its clock can run shorter.
Source of the numbers
| react-spring | @react-spring/core 10.1.2 |
| config.default = { tension: 170, friction: 26 } | packages/core/src/constants.ts, const config |
Read it at github.com/pmndrs/react-spring/blob/main/packages/core/src/constants.ts.
Conversion: Stiffness is tension and damping is friction, with mass 1 (the default). The physics loop in the same package, acceleration = (-tension x displacement - friction x velocity) / mass, is the spring that spring() in springs.js solves.
Related springs
The four closest curves in this set, by the average gap between the two springs over their first seconds. A gap of 0.01 is invisible; 0.1 is a different feel.