Jelly Press Button — Spring Physics Click Snippet

A jelly press button reacts to a click the way a soft rubber object reacts to a poke: it flattens under pressure, then springs back past its resting size before settling, exactly like wobble-card's drag-to-squish surface but triggered by a press instead of a drag. Most "bouncy button" effects on the web fake this with a CSS @keyframes that plays a fixed sequence of scale values — which looks the same every time regardless of how hard or how long you pressed. This snippet instead runs an actual spring simulation on every animation frame, so the motion responds to real state (current velocity, current scale) rather than a canned timeline.

Why a spring simulation instead of `transition: transform`

A CSS transition eases linearly between two fixed values with a bezier curve — it cannot overshoot past its target and settle back, because a bezier curve is monotonic once you tell it "go from A to B." A spring, on the other hand, is defined by physical quantities: a target value, a current value, a velocity, a stiffness (how hard it's pulled toward the target), and a damping (how much energy is lost each frame). Because velocity persists across frames, the spring can fly past its target and get pulled back — that overshoot-then-settle motion is exactly what reads as "jelly" or "rubber" rather than "eased."

The physics loop

Each button gets its own state = { sx, sy, vx, vy } — separate scale and velocity for the X and Y axes, because jelly squash is not uniform: pressing flattens height while widening horizontally. On every requestAnimationFrame, the force toward the target is (target - current) * stiffness, added to velocity, then velocity itself is multiplied by damping (a value under 1) to bleed off energy. Position updates by adding velocity: state.sx += state.vx. This is a textbook explicit-Euler spring-damper integrator — simple enough to hand-write in a dozen lines, accurate enough to feel convincing.

Squash on `pointerdown`, release on `pointerup`

On pointerdown the target becomes { sx: 1.16, sy: 0.78 } — wider and flatter, like a ball hitting the floor. The spring loop wakes up (requestAnimationFrame(step)) and chases that target. On pointerup, pointerleave, or pointercancel, the target resets to { sx: 1, sy: 1 } — natural size — and because the button still has velocity from the squash, it overshoots past 1 (a brief stretch) before the damping settles it, which is the signature jelly wobble.

Stopping the loop cleanly

The loop checks atRest: both velocities and both distances-to-target below a small epsilon. Once true, it snaps state exactly to the target and sets running = false so requestAnimationFrame stops firing — the button is not burning frames once it's visually settled. wake() restarts the loop only when a new press or release changes the target while the loop is idle.

Tuning the feel

stiffness (default 0.28) controls how quickly the spring accelerates toward its target — higher feels snappier and more urgent. damping (default 0.62) controls how much overshoot survives each bounce — closer to 1 means almost no energy loss and a long wobbly settle; lower values converge faster with less bounce. The squash amounts themselves (1.16/0.78) set how dramatic the flattening looks; smaller deltas from 1 read as a subtle "press acknowledgment" rather than full cartoon jelly.

Applying it to any button

Call attachJelly(el) on any button-like element. No extra markup is required beyond an inner span so the transform origin stays centered and the label doesn't intercept pointer events oddly. Because the transform is applied directly via el.style.transform, this works identically on a magnetic button, a pill CTA, or a plain form submit button.