A bouncing ball can be seeked, so all four can share one clock. A drag cannot. Instead every pane gets the same gesture, and only the way it springs home is its own. Two of these take stiffness and damping straight off you. The other two make you solve the physics yourself and hand over the finished curve.
Drag anywhere on the fields. All four follow together.
0, 0 PX
/* No spring in CSS, so the curve is solved in JS
and pasted in as sampled points. */
.ball {
transition: translate 620ms
linear(0, 0.0512, 0.1905, 0.3789, 0.5722,
0.7371, 0.8567, 0.9312, 0.9706, 1);
}
/* Released: just go home, the curve does the rest. */
.ball.released {
translate: 0px 0px;
}linear() finally makes real spring curves possible in plain CSS, and once the curve exists the compositor runs it without touching the main thread.
There is no spring primitive, so you solve the physics yourself and paste in a list of sampled points. Every change to stiffness or damping means regenerating the whole curve.
Spring solved up front, baked into a linear() curve
Loading engines…