Motion default spring
Motion uses it for a spring you declare with type “spring” and no other numbers. Stiffness 100, damping 10 and mass 1 give a damping ratio of 0.5, so the spring is underdamped. It settles to within 0.1% in 1.275 s. It passes the end value by up to 16.3% at 0.363 s and crosses it 3 times.
Demo
Both boxes take 1.275 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 (1275 ms) and a linear() string that follows the spring.
transition: translate 1275ms linear(0, 0.0054, 0.021, 0.0454, 0.0776, 0.1164, 0.1608, 0.2097, 0.2621, 0.3171, 0.3739, 0.4316, 0.4896, 0.5473, 0.6039, 0.6591, 0.7124, 0.7634, 0.8117, 0.8572, 0.8997, 0.9389, 0.9749, 1.0075, 1.0367, 1.0626, 1.0852, 1.1046, 1.1209, 1.1343, 1.145, 1.1529, 1.1585, 1.1618, 1.163, 1.1624, 1.1601, 1.1563, 1.1512, 1.145, 1.1379, 1.13, 1.1215, 1.1126, 1.1034, 1.094, 1.0846, 1.0751, 1.0659, 1.0568, 1.0481, 1.0397, 1.0318, 1.0243, 1.0173, 1.0108, 1.0049, 0.9995, 0.9947, 0.9904, 0.9866, 0.9834, 0.9806, 0.9784, 0.9766, 0.9752, 0.9743, 0.9737, 0.9734, 0.9735, 0.9738, 0.9744, 0.9752, 0.9762, 0.9773, 0.9786, 0.98, 0.9814, 0.9829, 0.9845, 0.986, 0.9875, 0.989, 0.9905, 0.992, 0.9933, 0.9946, 0.9959, 0.997, 0.9981, 0.9991, 1, 1.0008, 1.0015, 1.0021, 1.0026, 1.0031, 1.0035, 1.0038, 1.004, 1.0042, 1.0043, 1.0043, 1.0043, 1.0043, 1.0042, 1.0041, 1.0039, 1.0037, 1.0035, 1.0033, 1.0031, 1.0028, 1.0026, 1.0023, 1.0021, 1.0018, 1.0016, 1.0013, 1.0011, 1);el.animate({ translate: ['0 0', '240px 0'] }, { duration: 1275, easing: 'linear(0, 0.0054, 0.021, 0.0454, 0.0776, 0.1164, 0.1608, 0.2097, 0.2621, 0.3171, 0.3739, 0.4316, 0.4896, 0.5473, 0.6039, 0.6591, 0.7124, 0.7634, 0.8117, 0.8572, 0.8997, 0.9389, 0.9749, 1.0075, 1.0367, 1.0626, 1.0852, 1.1046, 1.1209, 1.1343, 1.145, 1.1529, 1.1585, 1.1618, 1.163, 1.1624, 1.1601, 1.1563, 1.1512, 1.145, 1.1379, 1.13, 1.1215, 1.1126, 1.1034, 1.094, 1.0846, 1.0751, 1.0659, 1.0568, 1.0481, 1.0397, 1.0318, 1.0243, 1.0173, 1.0108, 1.0049, 0.9995, 0.9947, 0.9904, 0.9866, 0.9834, 0.9806, 0.9784, 0.9766, 0.9752, 0.9743, 0.9737, 0.9734, 0.9735, 0.9738, 0.9744, 0.9752, 0.9762, 0.9773, 0.9786, 0.98, 0.9814, 0.9829, 0.9845, 0.986, 0.9875, 0.989, 0.9905, 0.992, 0.9933, 0.9946, 0.9959, 0.997, 0.9981, 0.9991, 1, 1.0008, 1.0015, 1.0021, 1.0026, 1.0031, 1.0035, 1.0038, 1.004, 1.0042, 1.0043, 1.0043, 1.0043, 1.0043, 1.0042, 1.0041, 1.0039, 1.0037, 1.0035, 1.0033, 1.0031, 1.0028, 1.0026, 1.0023, 1.0021, 1.0018, 1.0016, 1.0013, 1.0011, 1)', fill: 'both' });import { spring, springDuration, springLinear } from '../../core/motion/springs.js';
const k = 100, d = 10;
// 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: 1275 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
- 100k, with mass 1
- Damping
- 10d, with mass 1
- Damping ratio
- 0.5underdamped
- Settle time
- 1.275 swithin 0.1% of the end
- Overshoot
- 16.3%peak at 0.363 s
- Crosses the end
- 3times
- 50% of travel
- 0.13 s10% of the settle time
- 90% of travel
- 0.213 s17% of the settle time
- Natural frequency
- 10 rad/ssqrt(k)
- Ring period
- 0.726 sone swing of the overshoot
- Peak speed
- 6.96xtimes the average speed
- linear() points
- 121within 0.13% 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
| Motion (Framer Motion) | motion-dom 14.9.0 (motion and framer-motion 14.9.0) |
| transition: { type: "spring" } with no other option: stiffness 100, damping 10, mass 1 | defaultStiffness, defaultDamping, defaultMass in animation/generators/spring.ts |
Read it at github.com/motiondivision/motion/blob/main/packages/motion-dom/src/animation/generators/spring.ts.
Conversion: Stiffness and damping are used as they are, with mass 1.
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.