Spring Animation

Motion was specified with time and a curve for a long time: move for 0.3 seconds, start fast, end slow. Those two values are duration, the span the motion lasts, and easing, the shape of its acceleration and deceleration.

That works while the user is only watching. It breaks the moment a hand gets involved. Drag a sheet down and release it, and there is real speed left at the instant of release — but a time-specified animation discards that speed and starts its 0.3 seconds from scratch. You flick hard and the screen drifts back at its own leisurely pace, which comes out in review as the motion not feeling connected to your hand. Vague as feedback, accurate as a description.

Spring animation drops the time specification and imitates physics instead. Treat the element as a mass hanging from a spring, and the speed at release becomes the starting speed of what happens next.

Three values get specified instead of a time, and the length of the motion comes out as their result.

1. Stiffness is how hard the spring pulls toward the resting position. Raise it and the element rushes; lower it and the element dawdles.
2. Damping is the resistance that brings motion to a stop. Low damping overshoots and wobbles several times; high enough damping never crosses the target at all. This is the value you raise for a spring with no bounce.
3. Mass is the weight of the object. Increase it and the element starts sluggishly and keeps wobbling longer.

Initial velocity joins those three. It carries the speed at the moment of release straight into the motion, so how hard the hand moved becomes how hard the element moves. Release the same sheet gently and it closes quietly; flick it and it travels further before coming back.

The trade is that you can't know in advance how many seconds it takes. Where a time has to be hit — several elements moving in sequence, for instance — the time-based approach is easier to control. In practice, motion a hand touches gets a spring and motion that plays on its own gets a duration.

"This sheet should be a spring. It needs to inherit the drag speed."

A proposal that release speed has to carry into the motion.

"Raise the damping on this spring. Two bounces reads as noisy."

Pointing out that the wobble has passed usefulness and become decoration.

"This stretch needs an exact duration, so a spring is out."

The timing has to be hit, and an approach with an unpredictable length can't do that.

At Pagedeck the first use was drag-to-reorder on document cards. Noa mocked it up as a 0.25-second motion, and once Theo wired it in, hand and screen disagreed every time a card was released quickly. Switching to a spring and raising the damping until it overshot just once removed the disagreement. The motion for the list first appearing stayed time-based at 0.2 seconds.