Spring Visualizer
Tune spring physics for Framer Motion and SwiftUI. Switch between raw physics and Apple-style duration + bounce.
{ type: "spring", stiffness: 100, damping: 10, mass: 1 }The math
How spring animations work
Every spring animation solves the equation of a damped harmonic oscillator: a system where a restoring force () pulls a value toward its target, resistance () slows it down, and inertia () determines how quickly it responds. The interplay of these three parameters produces the characteristic overshoot, oscillation, and settling that make spring motion feel physical.
The damping ratio () is the single number that defines the character of a spring. Below 1.0, the spring is underdamped and overshoots its target. At exactly 1.0, it's critically damped – the fastest path to the target without any overshoot. Above 1.0, it's overdamped and moves sluggishly. Most UI animations sit between and – enough bounce to feel alive, not enough to feel chaotic.
Apple's Spring(duration:bounce:) API, introduced in iOS 17, abstracts the physics into two designer-friendly parameters. Duration maps to the perceptual settling time, and bounce maps linearly to the damping ratio: is critically damped, is undamped. This tool implements the same conversion, documented in the formula reference above.
Framer Motion, the most widely used React animation library (over 4 million weekly npm downloads), uses the physics parameterization directly: { type: "spring", stiffness, damping, mass }. This visualizer generates copy-ready config for both Framer Motion and SwiftUI.
Frequently asked questions
What is a spring animation?
A spring animation simulates the physics of a damped harmonic oscillator. Instead of following a fixed timing curve like cubic-bezier, it uses mass, stiffness, and damping to produce motion that feels natural. Spring animations are used in Framer Motion, SwiftUI, React Native Reanimated, and Android Jetpack Compose.
What do stiffness, damping, and mass control?
Stiffness controls how aggressively the spring pulls toward its target – higher values mean faster, snappier motion. Damping controls resistance – higher values reduce oscillation and overshoot. Mass controls inertia – heavier objects accelerate slower and take longer to settle. The damping ratio (zeta) determines whether the spring oscillates (underdamped, zeta < 1), settles without bouncing (critically damped, zeta = 1), or moves sluggishly (overdamped, zeta > 1).
How does Apple's duration and bounce API work?
Apple introduced Spring(duration:bounce:) in iOS 17 and SwiftUI. Duration is the perceptual settling time. Bounce ranges from 0 (critically damped, no overshoot) to 1 (undamped oscillation). Internally, Apple converts these to mass = 1, stiffness = (2π/duration)², and damping = (1 – bounce) × 4π/duration. This visualizer lets you work in either parameterization and see the derived values.
What spring values should I use for UI animations?
For most UI transitions, start with Apple's presets: Smooth (duration 0.5s, bounce 0) for subtle transitions, Snappy (duration 0.5s, bounce 0.15) for responsive interactions, or Bouncy (duration 0.5s, bounce 0.3) for playful elements. In physics terms, stiffness 100–300 with damping 10–20 covers most use cases. Settling time under 600ms feels responsive; over 1s feels deliberate.
How do I convert between Framer Motion and SwiftUI spring values?
Framer Motion uses { type: "spring", stiffness, damping, mass }. SwiftUI uses Spring(duration:bounce:). This tool converts between them automatically. Switch between Physics and Apple mode, and the derived values update in real time. Copy the config in whichever format your framework needs.
What is the damping ratio and why does it matter?
The damping ratio (zeta, ζ) is calculated as damping / (2 × √(stiffness × mass)). It determines the character of the animation: ζ < 1 is underdamped (oscillates and overshoots), ζ = 1 is critically damped (fastest return without overshoot), and ζ > 1 is overdamped (slow, no bounce). Most pleasant UI animations have a damping ratio between 0.4 and 0.8.
More tools
HDR Ripple Button
Material-inspired ripple effect using CSS P3 wide-gamut color space for Apple displays. Pure CSS, additive blending.
Coupon State Transitions
Multi-state promotional UI: brand found → coupons found → applying → savings → success. GSAP-orchestrated animations.