vaweGitHub

Springsreact-spring

react-spring slow

Its tension (280) is the same as molasses; only the friction differs (60 against 120). Stiffness 280, damping 60 and mass 1 give a damping ratio of 1.793, so the spring is overdamped. It settles to within 0.1% in 1.375 s. It never passes the end value.

Demo

Progress against time. The time axis runs 0 to 1.375 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 slow
linear

Both boxes take 1.375 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 (1375 ms) and a linear() string that follows the spring.

css linear()
transition: translate 1375ms linear(0, 0.0041, 0.0148, 0.03, 0.0483, 0.0687, 0.0904, 0.1128, 0.1357, 0.1585, 0.1813, 0.2038, 0.226, 0.2477, 0.269, 0.2897, 0.3099, 0.3297, 0.3488, 0.3675, 0.3857, 0.4033, 0.4205, 0.4371, 0.4533, 0.469, 0.4843, 0.4992, 0.5136, 0.5276, 0.5412, 0.5544, 0.5672, 0.5797, 0.5918, 0.6035, 0.615, 0.6261, 0.6368, 0.6473, 0.6574, 0.6673, 0.6769, 0.6862, 0.6952, 0.704, 0.7125, 0.7208, 0.7288, 0.7367, 0.7442, 0.7516, 0.7588, 0.7657, 0.7724, 0.779, 0.7854, 0.7915, 0.7975, 0.8034, 0.809, 0.8145, 0.8199, 0.8251, 0.8301, 0.835, 0.8397, 0.8444, 0.8488, 0.8532, 0.8574, 0.8615, 0.8655, 0.8694, 0.8732, 0.8768, 0.8804, 0.8838, 0.8871, 0.8904, 0.8936, 0.8966, 0.8996, 0.9025, 0.9053, 0.908, 0.9107, 0.9132, 0.9157, 0.9182, 0.9205, 0.9228, 0.925, 0.9272, 0.9293, 0.9313, 0.9333, 0.9352, 0.9371, 0.9389, 0.9407, 0.9424, 0.944, 0.9456, 0.9472, 0.9487, 0.9502, 0.9516, 0.953, 0.9544, 0.9557, 0.957, 0.9582, 0.9594, 0.9606, 0.9617, 0.9628, 0.9639, 0.9649, 0.9659, 0.9669, 0.9679, 0.9688, 0.9697, 0.9706, 0.9714, 0.9722, 0.973, 0.9738, 0.9746, 0.9753, 0.976, 0.9767, 0.9774, 0.978, 0.9787, 0.9793, 0.9799, 0.9805, 0.981, 0.9816, 0.9821, 0.9826, 0.9831, 0.9836, 0.9841, 0.9845, 0.985, 0.9854, 0.9858, 0.9862, 0.9866, 0.987, 0.9874, 0.9878, 0.9881, 0.9884, 0.9888, 0.9891, 0.9894, 0.9897, 0.99, 0.9903, 0.9906, 0.9909, 0.9911, 0.9914, 0.9916, 0.9919, 0.9921, 0.9923, 0.9925, 0.9928, 0.993, 0.9932, 0.9934, 0.9936, 0.9937, 0.9939, 0.9941, 0.9943, 0.9944, 0.9946, 0.9948, 0.9949, 0.995, 0.9952, 0.9953, 0.9955, 0.9956, 0.9957, 0.9958, 0.996, 0.9961, 0.9962, 0.9963, 0.9964, 0.9965, 0.9966, 0.9967, 0.9968, 0.9969, 0.997, 0.9971, 0.9972, 0.9972, 0.9973, 0.9974, 0.9975, 0.9975, 0.9976, 0.9977, 0.9978, 0.9978, 0.9979, 0.9979, 0.998, 0.9981, 0.9981, 0.9982, 0.9982, 0.9983, 0.9983, 0.9984, 0.9984, 0.9985, 0.9985, 0.9985, 0.9986, 0.9986, 0.9987, 0.9987, 0.9987, 0.9988, 0.9988, 0.9989, 0.9989, 0.9989, 0.9989, 0.999, 1);
web animations api
el.animate({ translate: ['0 0', '240px 0'] }, { duration: 1375, easing: 'linear(0, 0.0041, 0.0148, 0.03, 0.0483, 0.0687, 0.0904, 0.1128, 0.1357, 0.1585, 0.1813, 0.2038, 0.226, 0.2477, 0.269, 0.2897, 0.3099, 0.3297, 0.3488, 0.3675, 0.3857, 0.4033, 0.4205, 0.4371, 0.4533, 0.469, 0.4843, 0.4992, 0.5136, 0.5276, 0.5412, 0.5544, 0.5672, 0.5797, 0.5918, 0.6035, 0.615, 0.6261, 0.6368, 0.6473, 0.6574, 0.6673, 0.6769, 0.6862, 0.6952, 0.704, 0.7125, 0.7208, 0.7288, 0.7367, 0.7442, 0.7516, 0.7588, 0.7657, 0.7724, 0.779, 0.7854, 0.7915, 0.7975, 0.8034, 0.809, 0.8145, 0.8199, 0.8251, 0.8301, 0.835, 0.8397, 0.8444, 0.8488, 0.8532, 0.8574, 0.8615, 0.8655, 0.8694, 0.8732, 0.8768, 0.8804, 0.8838, 0.8871, 0.8904, 0.8936, 0.8966, 0.8996, 0.9025, 0.9053, 0.908, 0.9107, 0.9132, 0.9157, 0.9182, 0.9205, 0.9228, 0.925, 0.9272, 0.9293, 0.9313, 0.9333, 0.9352, 0.9371, 0.9389, 0.9407, 0.9424, 0.944, 0.9456, 0.9472, 0.9487, 0.9502, 0.9516, 0.953, 0.9544, 0.9557, 0.957, 0.9582, 0.9594, 0.9606, 0.9617, 0.9628, 0.9639, 0.9649, 0.9659, 0.9669, 0.9679, 0.9688, 0.9697, 0.9706, 0.9714, 0.9722, 0.973, 0.9738, 0.9746, 0.9753, 0.976, 0.9767, 0.9774, 0.978, 0.9787, 0.9793, 0.9799, 0.9805, 0.981, 0.9816, 0.9821, 0.9826, 0.9831, 0.9836, 0.9841, 0.9845, 0.985, 0.9854, 0.9858, 0.9862, 0.9866, 0.987, 0.9874, 0.9878, 0.9881, 0.9884, 0.9888, 0.9891, 0.9894, 0.9897, 0.99, 0.9903, 0.9906, 0.9909, 0.9911, 0.9914, 0.9916, 0.9919, 0.9921, 0.9923, 0.9925, 0.9928, 0.993, 0.9932, 0.9934, 0.9936, 0.9937, 0.9939, 0.9941, 0.9943, 0.9944, 0.9946, 0.9948, 0.9949, 0.995, 0.9952, 0.9953, 0.9955, 0.9956, 0.9957, 0.9958, 0.996, 0.9961, 0.9962, 0.9963, 0.9964, 0.9965, 0.9966, 0.9967, 0.9968, 0.9969, 0.997, 0.9971, 0.9972, 0.9972, 0.9973, 0.9974, 0.9975, 0.9975, 0.9976, 0.9977, 0.9978, 0.9978, 0.9979, 0.9979, 0.998, 0.9981, 0.9981, 0.9982, 0.9982, 0.9983, 0.9983, 0.9984, 0.9984, 0.9985, 0.9985, 0.9985, 0.9986, 0.9986, 0.9987, 0.9987, 0.9987, 0.9988, 0.9988, 0.9989, 0.9989, 0.9989, 0.9989, 0.999, 1)', fill: 'both' });
vawe
import { spring, springDuration, springLinear } from '../../core/motion/springs.js';

const k = 280, d = 60;

// 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: 1375 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
280k, with mass 1
Damping
60d, with mass 1
Damping ratio
1.793overdamped
Settle time
1.375 swithin 0.1% of the end
Overshoot
0%stays inside the end
Crosses the end
0times
50% of travel
0.156 s11% of the settle time
90% of travel
0.471 s34% of the settle time
Natural frequency
16.73 rad/ssqrt(k)
Ring period
noneit does not oscillate
Peak speed
5.48xtimes the average speed
linear() points
241within 0.10% 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.slow = { tension: 280, friction: 60 }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