ALL DEMOS

Spring
drag ×4

A bouncing ball can be seeked, so all four can share one clock. A drag can't. So they share the gesture instead, and only the trip home is each library's own. Motion and Anime just take stiffness and damping. GSAP will do a real spring if I solve it first, and CSS can't do one at all, so it fakes a bounce. Drag the damping slider and see which ones answer.

010 kB · NATIVECSSOne overshoot ease, duration matched by eyey(s) = 3(1−s)²s·1.56 + 3(1−s)s²·1 + s³767ms · nowhere to put k or c
0230 kB gz · 3.13GSAPCustomEase running a solved spring curvea = −(k·x + c·v) / m, stepped at 1/60 sk 180 · c 14 · m 1 → 46 pts, 767ms
0320 kB gz · v11MotionReal solver, stiffness and damping passed straight throughx(t) = x0·exp(−ζω0t)·[cos(ωdt) + (ζω0/ωd)·sin(ωdt)]ζ 0.52 · ω0 13.4 · ωd 11.4 rad/s
0413 kB gz · v4Anime.jscreateSpring() used as the easing functionx(t) = x0·exp(−ζω0t)·[cos(ωdt) + (ζω0/ωd)·sin(ωdt)]ζ 0.52 · ω0 13.4 · ωd 11.4 rad/s

Drag anywhere on the fields.Drag any ball. All four follow together.

0, 0 PX

spring.css
/* CSS doesn't do springs. This is what I used
   instead: one line, one bounce past the target.
   I nudge the duration to match the real spring, but
   the curve stays put. Obviously CSS doesn't have a
   place for damping, so it doesn't apply here. */
.ball {
  transition: translate 767ms
    cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Released: just go home, the curve does the rest. */
.ball.released {
  translate: 0px 0px;
}

Ratings

Onboarding
Ergonomics
Iteration
Debugging
Realism

What I like

It's one line from an easing cheat sheet, with no maths and no build step. It looks springy enough, and it only animates translate, so the browser can run it on its own thread and keep it smooth while JavaScript is busy.

What I don't

It isn't really a spring. It bounces once, in a shape I picked by eye, and there's nowhere to put stiffness or damping, so the damping slider moves the other three and leaves this one alone. Real physics means solving it in JS and pasting in a hundred numbers, and nobody writes those by hand.

How it's built

One overshoot ease, duration matched by eye

Loading engines…