← labtool2026-09-09

Spring

Design a SwiftUI spring by response and damping, watch it settle, and copy the same motion as SwiftUI, CSS linear(), Compose or Framer Motion.

Presets

Response seconds0.55 s One full swing of the undamped spring. Lower is stiffer and faster. Damping fraction0.825 Below 1 it overshoots. At 1 it just kisses the target. Above 1 it is slow and never bounces.

Settles in: 0.76 s
Overshoot: 1 %
Stiffness: 130.5
Damping: 18.85

Position over time

Preview

The preview runs on the CSS below, not on JavaScript, so what you see here is what the browser will do with it. Back and forth, each way on the spring.

SwiftUI

.spring(response: 0.55, dampingFraction: 0.825)

// iOS 17 and later
.spring(duration: 0.55, bounce: 0.175)

CSS

transition: transform 0.76s linear(0, 0.006 1.25%, 0.021 2.5%, 0.058 4.375%, 0.109 6.25%, 0.211 9.375%, 0.476 16.875%, 0.596 20.625%, 0.682 23.75%, 0.757 26.875%, 0.818 30%, 0.877 33.75%, 0.922 37.5%, 0.958 41.875%, 0.985 46.875%, 1.002 53.125%, 1.01 62.5%, 1);

Jetpack Compose

spring(dampingRatio = 0.825f, stiffness = 130.5f)

Framer Motion

{ type: "spring", stiffness: 130.5, damping: 18.85, mass: 1 }

All four describe the same physical spring with unit mass: stiffness is (2π / response)², damping is 2 · ζ · 2π / response. CSS has no spring, so the curve is sampled into linear() stops over the settle time, dropping points a straight line already covers. Apple's bounce is 1 − ζ, and its duration is the same number as response.