Interruptible animation

An interruptible animation can be re-aimed while it is still running. New input reads the element's current position, and in the best case its current velocity, then animates onward from there. The alternative, which most hand-rolled motion does by default, is to cancel and restart from the keyframe origin, which produces the jump every user notices and nobody can name.

Springs are the natural home for this: they are defined by state, not by a fixed duration, so handing them a new target mid-flight just bends the curve. Motion (Framer Motion), React Spring, and SwiftUI-style animation do it out of the box. CSS transitions get you the cheaper half: a changed target retargets from the current computed value, so the element never teleports, but the new transition starts its curve from a standstill, so whatever speed the element had is thrown away at the handover. Position-continuous, not velocity-continuous. CSS keyframe animations do neither: they restart, and getting a re-trigger at all needs the classic reflow hack.

Gotcha: a duration-based interrupt still runs the full duration. Flip a toggle 10 percent of the way in and the tiny remaining trip takes the same 300ms, so it drags. Either use a spring, or scale the duration to the remaining distance. Test by spamming the trigger: if anything teleports, snaps, or ends up in the wrong resting state, the animation is not actually interruptible.