Blend velocity on reversal

On reversal, move the target, keep the velocity, spring each axis.

From apple-design, §3, after Designing Fluid Interfaces, WWDC 2018 ↗.

Reverse mid-flight

Press Send, then press again while the ball moves.

Restarts from restBad
v = 0; target = t
Keeps velocityGood
target = t

spring.target = target;
// spring.velocity = 0;  the brick wall

Throw a PiP window

Flick either window toward a corner, or press Sample throw.

One spring on distanceBad
v = dot(velocity, dir)
X and Y springsGood
x ← vx, y ← vy

animate(pipX, corner.x, { type: "spring", velocity: vx, bounce: 0, visualDuration: 0.4 });
animate(pipY, corner.y, { type: "spring", velocity: vy, bounce: 0, visualDuration: 0.4 });

Caret that follows typing

Type fast and hold Backspace, or press Auto-type.

Restarts per keyBad
v = 0
Re-targets per keyGood
target = caretX
input.addEventListener("input", () => caret.set(measureCaretX(input)));

Why it matters, pros and cons

Why it matters

Reversing changes the destination, not the speed. Zeroing velocity hits a wall.

Pros

  • No seam when users change their mind.
  • Rapid re-targets stay smooth.
  • Thrown objects travel on natural arcs.

Cons

  • CSS transitions restart at zero; needs a JS spring.
  • Toggles should obey instantly; raise damping there.
  • Mismatched axis responses hook the path's end.