Spring-based motion configurations.
Springs describe physical motion — stiffness, damping, mass — rather than time-and-curve. Their duration is emergent: the motion ends when the value has settled at the target. This makes springs the right primitive for anything that should "feel physical": bouncy UI reveals, gesture-handoff momentum, anything where a tween's fixed-duration ramp would feel artificial.
Curated configurations covering the common feel-points.
A soft, slow settle. Mild overshoot, takes its time.
Good for: hero-element reveals, large modals, anything where a sense of weight is welcome.
Lively and bouncy. Several visible oscillations before settling.
Good for: playful UI accents, attention-grabbing reveals, cartoony interactions.
Snappy and direct. Small overshoot, settles quickly.
Good for: button presses, tooltip reveals, anything that should feel crisp and immediate.
Low stiffness with extra damping — a long, mellow approach.
Good for: ambient motion, slow-developing reveals, "drifting into place" effects.
Critically damped — the fastest approach to the target with no overshoot whatsoever.
Good for: when you want spring-like timing but tween-like absence of overshoot. Useful for scroll handoffs and other places where bounce would look like a bug.
Hand-tune a spring's physics.
stiffness — how strongly the spring pulls toward the target.
Higher is snappier, lower is loose. Typical 100..400.
(Hooke's-law. Must be >= 0.)damping — how much friction slows the motion. Higher is less
wobbly, lower is bouncier. Typical 10..40.
(Viscous friction. Must be >= 0.)mass — how heavy the thing feels. Heavier is more sluggish,
lighter is more reactive. Typical 1.0. Must be > 0.If you want to dial in a specific feel, the ratio
damping / (2·√(stiffness·mass)) controls the overall character:
1 — bouncy: overshoots and oscillates before settling1 — crisp: fastest possible settle with no overshoot1 — sluggish: eases in slowly without overshootInputs are clamped: stiffness and damping below 0 become 0, mass below 1e-6 becomes 1e-6.
customSpring : Spring
customSpring =
Motion.Spring.custom
{ stiffness = 220
, damping = 16
, mass = 1
}
Opaque spring configuration. Construct one via a preset (
gentle,wobbly,stiff,slow,noWobble) orcustom.Pass to whichever animation or scroll engine accepts a spring; the engine will run the motion until the value is settled. There is no explicit duration — the spring's stiffness, damping, and mass determine how long it takes to come to rest.