consolelog.tools

Spring Animation Calculator

Design spring physics with a live, true-to-physics preview and an overshoot curve, then export a modern CSS linear() easing, @keyframes, Framer Motion, or react-spring config.

About this ToolHow it works, benefits & use cases

Spring animations feel right because they obey physics, but tuning them by guessing numbers is slow. This calculator integrates a damped harmonic oscillator and shows you the result instantly: a demo block that actually springs across the preview, a position-over-time curve with the overshoot peak marked, and live stats for settle time, overshoot percentage, bounce count, and damping kind. Tune raw stiffness, damping, and mass, or flip to the designer form and work in bounce (0 to 1) plus duration the way Framer Motion does - the conversion runs both ways so you never lose your place. Because the preview is driven by a modern CSS linear() easing sampled straight from the physics, what you see in the browser matches the math exactly. When it feels right, export a CSS linear() easing, a @keyframes fallback with a reduced-motion guard, a Framer Motion transition, or a react-spring config.

How to Use

  1. 1Start from a preset chip (Gentle, Wobbly, Stiff, Slow, Bouncy, or Molasses) to get in the right ballpark.
  2. 2Choose Physics mode for stiffness / damping / mass, or Designer mode for bounce + duration.
  3. 3Drag the sliders and watch the demo block spring and the curve update live; set an initial velocity for a flick.
  4. 4Read the stat cards (settle time, overshoot, bounces, damping kind) and the plain-English behavior notes.
  5. 5Pick an output format - CSS linear(), CSS @keyframes, Framer Motion, or react-spring - then copy, download, or share.
  6. 6Hit Replay any time to re-trigger the demo animation from the start.

Key Benefits

  • A real spring integrator, not a cubic-bezier approximation - the curve and preview are the actual physics
  • CSS linear() easing sampled from the spring so a plain transition mimics the spring exactly
  • Two parameterizations - physics (stiffness/damping/mass) and designer (bounce/duration) - that convert both ways
  • Live demo element plus a position-over-time curve with the overshoot peak marked
  • Instant stats: settle time in ms, overshoot percentage, bounce count, and damping classification
  • @keyframes export includes a prefers-reduced-motion guard out of the box
  • One model, four exports: CSS linear(), CSS @keyframes, Framer Motion, and react-spring

Common Use Cases

  • Designing a button or card hover that springs naturally instead of easing linearly
  • Matching a CSS transition to a Framer Motion or react-spring config used elsewhere in an app
  • Tuning the bounciness of a modal, drawer, or toast entrance and reading the exact settle time
  • Producing a CSS linear() easing for spring motion without pulling in a JavaScript animation library
  • Teaching or learning how stiffness, damping, and mass map to overshoot and oscillation
Position over timeovershoot peak marked
rest
Settle
1558ms
Overshoot
20.6%
Bounces
3
Damping
Underdamped

Presets

Spring

Behavior

  • Underdamped: overshoots ~21% and settles in ~1558ms.
  • Bounces about 3 times before resting.
  • Damping ratio zeta = 0.447 (omega_n = 13.42 rad/s).
  • Very bouncy - good for playful, energetic motion; can feel distracting if overused.

Copy, download, share, or pipe to another tool

/* Spring easing as a CSS linear() function.
   Sampled from the spring physics so a plain transition mimics the spring. */
.spring-target {
  transition: transform 0.6s linear(0 0%, 0.2373 3.7%, 0.6711 7.41%, 1.0229 11.11%, 1.1882 14.82%, 1.1923 18.52%, 1.1147 22.22%, 1.0286 25.93%, 0.974 29.63%, 0.9576 33.33%, 0.9671 37.04%, 0.9854 40.74%, 1.0006 44.44%, 1.0079 48.15%, 1.0082 51.85%, 1.005 55.56%, 1.0013 59.26%, 0.999 62.96%, 0.9982 66.67%, 0.9986 70.37%, 0.9994 74.07%, 1 77.78%, 1.0003 81.48%, 1.0004 85.19%, 1.0002 88.89%, 1.0001 92.59%, 1 96.3%, 0.9999 100%);
}

/* Apply the target state to trigger it, e.g. on hover or a toggled class:
.spring-target.is-active { transform: translateX(120px); } */

True-to-physics, exportable everywhere

The preview is driven by a CSS linear()easing sampled directly from the spring's numerically integrated motion, so what you see is what the math produces. Tune raw stiffness / damping / mass, or switch to the designer's bounce + duration form (Framer Motion-style) — the two convert both ways. Export a CSS linear() easing, a @keyframes fallback with a reduced-motion guard, a Framer Motion transition, or a react-spring config.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Related tools