vaweGitHub

Springsreact-spring

react-spring wobbly

Of the six react-spring presets it overshoots the most. Stiffness 180, damping 12 and mass 1 give a damping ratio of 0.447, so the spring is underdamped. It settles to within 0.1% in 1.14 s. It passes the end value by up to 20.8% at 0.262 s and crosses it 4 times.

Demo

Progress against time. The time axis runs 0 to 1.14 s, the settle time.0100.51progress50%90%
Dashed: a straight line. The dot and the line move with the box on the right.
react-spring wobbly
linear

Both boxes take 1.14 s. This is real time.

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 (1140 ms) and a linear() string that follows the spring.

css linear()
transition: translate 1140ms linear(0, 0.0078, 0.03, 0.0647, 0.1099, 0.164, 0.225, 0.2914, 0.3614, 0.4337, 0.5069, 0.5798, 0.6512, 0.7204, 0.7863, 0.8484, 0.9062, 0.9591, 1.007, 1.0497, 1.0869, 1.1188, 1.1455, 1.1671, 1.1837, 1.1958, 1.2035, 1.2073, 1.2076, 1.2046, 1.1988, 1.1905, 1.1803, 1.1683, 1.1551, 1.1409, 1.1261, 1.111, 1.0958, 1.0807, 1.0661, 1.052, 1.0386, 1.0261, 1.0145, 1.004, 0.9945, 0.9861, 0.9789, 0.9727, 0.9676, 0.9636, 0.9606, 0.9585, 0.9572, 0.9568, 0.9571, 0.9579, 0.9594, 0.9613, 0.9636, 0.9662, 0.969, 0.972, 0.9752, 0.9783, 0.9815, 0.9846, 0.9876, 0.9904, 0.9931, 0.9957, 0.998, 1.0001, 1.0019, 1.0036, 1.005, 1.0062, 1.0071, 1.0079, 1.0084, 1.0088, 1.0089, 1.009, 1.0089, 1.0086, 1.0083, 1.0078, 1.0073, 1.0068, 1.0062, 1.0055, 1.0049, 1.0042, 1.0036, 1.0029, 1.0023, 1.0017, 1.0012, 1.0007, 1.0002, 0.9998, 0.9994, 0.9991, 0.9988, 0.9986, 0.9984, 0.9983, 0.9982, 0.9982, 0.9981, 0.9981, 0.9982, 0.9982, 0.9983, 0.9984, 0.9985, 0.9986, 0.9988, 0.9989, 1);
web animations api
el.animate({ translate: ['0 0', '240px 0'] }, { duration: 1140, easing: 'linear(0, 0.0078, 0.03, 0.0647, 0.1099, 0.164, 0.225, 0.2914, 0.3614, 0.4337, 0.5069, 0.5798, 0.6512, 0.7204, 0.7863, 0.8484, 0.9062, 0.9591, 1.007, 1.0497, 1.0869, 1.1188, 1.1455, 1.1671, 1.1837, 1.1958, 1.2035, 1.2073, 1.2076, 1.2046, 1.1988, 1.1905, 1.1803, 1.1683, 1.1551, 1.1409, 1.1261, 1.111, 1.0958, 1.0807, 1.0661, 1.052, 1.0386, 1.0261, 1.0145, 1.004, 0.9945, 0.9861, 0.9789, 0.9727, 0.9676, 0.9636, 0.9606, 0.9585, 0.9572, 0.9568, 0.9571, 0.9579, 0.9594, 0.9613, 0.9636, 0.9662, 0.969, 0.972, 0.9752, 0.9783, 0.9815, 0.9846, 0.9876, 0.9904, 0.9931, 0.9957, 0.998, 1.0001, 1.0019, 1.0036, 1.005, 1.0062, 1.0071, 1.0079, 1.0084, 1.0088, 1.0089, 1.009, 1.0089, 1.0086, 1.0083, 1.0078, 1.0073, 1.0068, 1.0062, 1.0055, 1.0049, 1.0042, 1.0036, 1.0029, 1.0023, 1.0017, 1.0012, 1.0007, 1.0002, 0.9998, 0.9994, 0.9991, 0.9988, 0.9986, 0.9984, 0.9983, 0.9982, 0.9982, 0.9981, 0.9981, 0.9982, 0.9982, 0.9983, 0.9984, 0.9985, 0.9986, 0.9988, 0.9989, 1)', fill: 'both' });
vawe
import { spring, springDuration, springLinear } from '../../core/motion/springs.js';

const k = 180, d = 12;

// 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: 1140 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
180k, with mass 1
Damping
12d, with mass 1
Damping ratio
0.447underdamped
Settle time
1.14 swithin 0.1% of the end
Overshoot
20.8%peak at 0.262 s
Crosses the end
4times
50% of travel
0.095 s8% of the settle time
90% of travel
0.151 s13% of the settle time
Natural frequency
13.42 rad/ssqrt(k)
Ring period
0.524 sone swing of the overshoot
Peak speed
8.77xtimes the average speed
linear() points
121within 0.19% 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.wobbly = { tension: 180, friction: 12 }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.

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.

More springs

All spring presets →Easing functions