Physics / simulation · 11.1
Inertia-driven pan
A well-oiled drawer.
Drag or flick input that glides to a natural stop instead of halting.
4 knobs
How it actually works
If the playground teaches one physics idea, teach this one. It is three lines and it is the entire difference between cheap and premium on every draggable thing you will ever build. Set VELOCITY_LERP to 1 and it is a naive drag handler: it stops dead the instant you let go, and it feels like a bug.
Input accumulates into a target velocity; the actual velocity eases toward it, verbatim: velocity = lerp(velocity, targetVelocity, VELOCITY_LERP), applied to one position accumulator per frame. The source is explicit about why: it is "avoiding twitchy motion". One accumulator, one lerp, and the drawer is oiled.
The knobs, named
VELOCITY_LERP is the entire feel. Friction, edge resistance and snap are the rest.
| Knob | Source | What it teaches |
|---|---|---|
| VELOCITY_LERP | sourced | The sourced constant, and the entire feel. At 1 there is no inertia at all: drag the stage and let go, and feel a bug. |
| Friction | sourced | Decay per frame after release. 0.99 glides for days; 0.9 barely coasts. |
| Edge resistance | sourced | The Palmer grid's value is 0.9. How hard the boundary pushes back before you reach it. |
| Snap to items | sourced | Land on a card rather than wherever momentum ran out. This is where inertia meets a design decision. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (author)
Codrops Infinite Canvas (hand-rolled; the lerp line and the "avoiding twitchy motion" framing are verbatim); GSAP Draggable docs; the Palmer grid for edgeResistance 0.9.
- Seen on
- Codrops Infinite Canvas; Palmer; GSAP Draggable.
- Dependencies
- vanilla: it is a lerp. GSAP InertiaPlugin for bounds, snapping and edge resistance.
- Difficulty
- trivial. A lerp is three lines: the single highest value-per-line technique in the index.
- Performance
- Negligible: one lerp per frame.
- Accessibility and the floor
- The glide should be cut under reduced motion, and ours is: the pan jumps to its target. Keyboard users get discrete arrow-key jumps regardless of the physics settings.
Notes
Composability. The lerp here and the spring in 8.2 are the two ways anything ever feels physical. A lerp has no memory of velocity; a spring does. That is the only difference and it is everything.