vawe heavy
It is the only overdamped house spring, so it never passes the end value. Stiffness 90, damping 22 and mass 1 give a damping ratio of 1.16, so the spring is overdamped. It settles to within 0.1% in 1.345 s. It never passes the end value.
Demo
Both boxes take 1.345 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 (1345 ms) and a linear() string that follows the spring.
transition: translate 1345ms linear(0, 0.0052, 0.0192, 0.04, 0.0659, 0.0954, 0.1276, 0.1614, 0.1963, 0.2316, 0.2668, 0.3017, 0.336, 0.3694, 0.4019, 0.4332, 0.4633, 0.4923, 0.52, 0.5464, 0.5716, 0.5956, 0.6184, 0.6401, 0.6606, 0.68, 0.6984, 0.7158, 0.7322, 0.7477, 0.7624, 0.7762, 0.7893, 0.8016, 0.8132, 0.8241, 0.8344, 0.8441, 0.8533, 0.8619, 0.87, 0.8777, 0.8849, 0.8916, 0.898, 0.904, 0.9097, 0.915, 0.92, 0.9247, 0.9292, 0.9334, 0.9373, 0.941, 0.9445, 0.9478, 0.9508, 0.9537, 0.9565, 0.959, 0.9615, 0.9637, 0.9659, 0.9679, 0.9698, 0.9716, 0.9733, 0.9748, 0.9763, 0.9777, 0.979, 0.9803, 0.9814, 0.9825, 0.9836, 0.9845, 0.9854, 0.9863, 0.9871, 0.9879, 0.9886, 0.9893, 0.9899, 0.9905, 0.9911, 0.9916, 0.9921, 0.9926, 0.993, 0.9934, 0.9938, 0.9942, 0.9945, 0.9948, 0.9951, 0.9954, 0.9957, 0.9959, 0.9962, 0.9964, 0.9966, 0.9968, 0.997, 0.9972, 0.9974, 0.9975, 0.9977, 0.9978, 0.9979, 0.998, 0.9982, 0.9983, 0.9984, 0.9985, 0.9986, 0.9986, 0.9987, 0.9988, 0.9989, 0.9989, 1);el.animate({ translate: ['0 0', '240px 0'] }, { duration: 1345, easing: 'linear(0, 0.0052, 0.0192, 0.04, 0.0659, 0.0954, 0.1276, 0.1614, 0.1963, 0.2316, 0.2668, 0.3017, 0.336, 0.3694, 0.4019, 0.4332, 0.4633, 0.4923, 0.52, 0.5464, 0.5716, 0.5956, 0.6184, 0.6401, 0.6606, 0.68, 0.6984, 0.7158, 0.7322, 0.7477, 0.7624, 0.7762, 0.7893, 0.8016, 0.8132, 0.8241, 0.8344, 0.8441, 0.8533, 0.8619, 0.87, 0.8777, 0.8849, 0.8916, 0.898, 0.904, 0.9097, 0.915, 0.92, 0.9247, 0.9292, 0.9334, 0.9373, 0.941, 0.9445, 0.9478, 0.9508, 0.9537, 0.9565, 0.959, 0.9615, 0.9637, 0.9659, 0.9679, 0.9698, 0.9716, 0.9733, 0.9748, 0.9763, 0.9777, 0.979, 0.9803, 0.9814, 0.9825, 0.9836, 0.9845, 0.9854, 0.9863, 0.9871, 0.9879, 0.9886, 0.9893, 0.9899, 0.9905, 0.9911, 0.9916, 0.9921, 0.9926, 0.993, 0.9934, 0.9938, 0.9942, 0.9945, 0.9948, 0.9951, 0.9954, 0.9957, 0.9959, 0.9962, 0.9964, 0.9966, 0.9968, 0.997, 0.9972, 0.9974, 0.9975, 0.9977, 0.9978, 0.9979, 0.998, 0.9982, 0.9983, 0.9984, 0.9985, 0.9986, 0.9986, 0.9987, 0.9988, 0.9989, 0.9989, 1)', fill: 'both' });import { SPRINGS, spring, springDuration, springLinear } from '../../core/motion/springs.js';
const { k, d } = SPRINGS.heavy;
// 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: 1345 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
- 90k, with mass 1
- Damping
- 22d, with mass 1
- Damping ratio
- 1.16overdamped
- Settle time
- 1.345 swithin 0.1% of the end
- Overshoot
- 0%stays inside the end
- Crosses the end
- 0times
- 50% of travel
- 0.194 s14% of the settle time
- 90% of travel
- 0.497 s37% of the settle time
- Natural frequency
- 9.49 rad/ssqrt(k)
- Ring period
- noneit does not oscillate
- Peak speed
- 4.24xtimes the average speed
- linear() points
- 121within 0.12% 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
| vawe house springs | core/motion/springs.js |
| SPRINGS.heavy = { k: 90, d: 22 } | SPRINGS.heavy |
These numbers are used as they are.
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.