CSS cubic-bezier can only approximate spring physics because it's limited to four control points on a cubic curve. The CSS linear() function, available in all major browsers since late 2023, allows you to sample a real spring equation (damped harmonic oscillator with stiffness, damping, and mass parameters) at 60 evenly spaced time steps and bake those values directly into CSS — no JavaScript at runtime. A JavaScript generator function is provided that computes the linear() easing string and the correct settle duration from physical parameters. The post covers the three damping regimes (underdamped, critically damped, overdamped), a parameter-to-perception reference table, and the limitations: no fixed duration, no velocity continuity on interruption, and token verbosity. Framer Motion remains the right choice for gesture-driven or interruptible animations.

9m read timeFrom carmenansio.com
Post cover image
Table of contents
How the browser animates anythingcubic-bezier is four control pointsWhat a real spring doeslinear() closes the gapcubic-bezier vs physics springParameters → perceptionWhere it breaks downWhen Framer Motion is still the right call
14 Impressions