AnimationIntermediate

Spring Motion

Motion driven by a damped spring instead of a tween — interruptible, retargetable, and alive on every frame.

animationphysicsspringprocedural

Examples

Captured from this page's own interactive demo below.

Overview

A tween is a promise: start here, end there, take exactly this long. A spring is a force: the object carries a velocity, the target pulls on it, damping bleeds the energy off. Change the target mid-flight and the spring doesn't stutter or restart — it just curves toward the new goal with all its momentum intact. That's why spring motion feels alive where tweens feel scripted.

Two numbers define the whole personality: frequency (how fast the spring pulls, in oscillations per second) and damping ratio (how quickly the bounce dies). Damping below 1 overshoots and wobbles — great for playful UI and cartoon props; exactly 1 is critically damped — the fastest possible arrival with zero overshoot, perfect for cameras; above 1 gets sluggish. Tune those two sliders instead of hand-authoring easing curves for every interaction.

The implementation is five lines of semi-implicit Euler: acceleration from displacement, velocity from acceleration, position from velocity. Because it's stateful, it composes for free — knock the velocity and you get a hit reaction; move the target and you get follow behavior; attach it to scale and you get squash. Half the effects on this site are a spring wearing a costume.

Interactive Demo

the box carries momentum through every retarget

Frequency2Hz

Damping Ratio0.5

Use Cases

UI panels and cursors that follow a targetCamera rigs and aim smoothingHit reactions and recoilDragged or thrown physics props

Best Practices

Do

✓Use semi-implicit Euler (update velocity first, then position) — it stays stable where naive Euler explodes.
✓Tune with frequency and damping ratio, not raw stiffness constants — designers can reason in 'bounces per second'.
✓Retarget freely mid-motion; carrying momentum through target changes is the entire point of a spring.

Don't

✕Don't run a spring with a huge frequency at a low framerate — past the stability limit it oscillates to infinity; clamp dt.
✕Don't use an underdamped spring for anything the player reads text from; wobbling UI is cute once and nauseating always.
✕Don't layer a spring on top of a tween on the same property — the two systems fight and the motion stutters.

Common Mistakes

⚠Updating position before velocity (explicit Euler) and shipping a spring that detonates on frame spikes.
⚠One global spring config for everything — a camera and a damage popup should not share a personality.
⚠Snapping the spring to the target when 'close enough' with a visible pop instead of letting it settle below perception.

Implementation

Paste this into your AI assistant (Cursor, Copilot, Claude) to add the effect to your project.

Prompt

Add the "Spring Motion" game-feel effect to my project: Motion driven by a damped spring instead of a tween — interruptible, retargetable, and alive on every frame.

How it works: A tween is a promise: start here, end there, take exactly this long. A spring is a force: the object carries a velocity, the target pulls on it, damping bleeds the energy off. Change the target mid-flight and the spring doesn't stutter or restart — it just curves toward the new goal with all its momentum intact. That's why spring motion feels alive where tweens feel scripted.

Guidelines:
- Use semi-implicit Euler (update velocity first, then position) — it stays stable where naive Euler explodes.
- Tune with frequency and damping ratio, not raw stiffness constants — designers can reason in 'bounces per second'.
- Retarget freely mid-motion; carrying momentum through target changes is the entire point of a spring.

Avoid:
- Don't run a spring with a huge frequency at a low framerate — past the stability limit it oscillates to infinity; clamp dt.
- Don't use an underdamped spring for anything the player reads text from; wobbling UI is cute once and nauseating always.
- Don't layer a spring on top of a tween on the same property — the two systems fight and the motion stutters.

Implement the effect in whatever engine/stack the project already uses and follow its existing code style. Wire it up where it makes sense.