phollyer/elm-motion/2.1.4

NOTE: the latest version is 3.0.4

Motion.Spring

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.

The Spring type

type alias Spring =
Spring

Opaque spring configuration. Construct one via a preset (gentle, wobbly, stiff, slow, noWobble) or custom.

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.

Presets

Curated configurations covering the common feel-points.

gentle : Spring

A soft, slow settle. Mild overshoot, takes its time.

Good for: hero-element reveals, large modals, anything where a sense of weight is welcome.

wobbly : Spring

Lively and bouncy. Several visible oscillations before settling.

Good for: playful UI accents, attention-grabbing reveals, cartoony interactions.

stiff : Spring

Snappy and direct. Small overshoot, settles quickly.

Good for: button presses, tooltip reveals, anything that should feel crisp and immediate.

slow : Spring

Low stiffness with extra damping — a long, mellow approach.

Good for: ambient motion, slow-developing reveals, "drifting into place" effects.

noWobble : Spring

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.

Custom configuration

{ stiffness : Float
, damping : Float
, mass : Float
}
-> Spring

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:

  • less than 1 — bouncy: overshoots and oscillates before settling
  • exactly 1 — crisp: fastest possible settle with no overshoot
  • more than 1 — sluggish: eases in slowly without overshoot

Inputs 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
        }