Spring easing
Physics-based spring motion with the CSS linear() function.
Quick implementation
/* Spring easing using linear() */
.spring {
animation-timing-function: linear(
0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%,
0.723 12.9%, 0.938 16.7%, 1.017, 1.077,
1.121, 1.149 24.3%, 1.159, 1.163, 1.161,
1.154 29.9%, 1.129 32.8%, 1.051 39.6%,
1.017 43.1%, 0.991, 0.977 51%,
0.974 53.8%, 0.975 57.1%, 0.997 69.8%,
1.003 76.9%, 1
);
}
@media (prefers-reduced-motion: reduce) {
.spring { animation: none; }
}Prompt this to your LLM
Includes role, constraints, and edge cases to handle.
You are a senior frontend engineer adding spring physics to UI animations.
Goal: Create a spring-like easing curve using the CSS linear() function that overshoots and oscillates before settling.
Technical constraints:
- Use the linear() easing function with 20–30 control points to approximate a damped spring.
- The curve should overshoot past 1.0, oscillate with decreasing amplitude, and settle at 1.0.
- Values above 1.0 represent overshoot; values that oscillate around 1.0 simulate spring bounce.
- Include percentage stops for precise timing of each control point.
- Use tools like linear-easing-generator.netlify.app to generate the points from spring parameters (stiffness, damping, mass).
- Include prefers-reduced-motion media query.
Edge cases:
- linear() is newer than cubic-bezier — provide a cubic-bezier fallback for older browsers.
- The overshoot can push elements outside their containers — use overflow: hidden on parents if needed.
- More control points = smoother curve but longer CSS. 25-30 points is a good balance.Why this matters in 2026
Spring animations are what make interfaces feel alive. Every native mobile platform uses spring physics — iOS, Android, and macOS all have spring-based animation primitives. Until linear(), CSS couldn't express springs because cubic-bezier() only has two control points and can't oscillate. linear() accepts arbitrary control points, letting you approximate any easing curve, including damped springs.
The logic
The linear() function defines an easing curve as a series of output values at specific time positions. The browser linearly interpolates between adjacent points. By listing values that overshoot past 1.0 (e.g., 1.163) and then oscillate back below 1.0 (e.g., 0.974) with decreasing amplitude, you create a damped spring effect. The optional percentage after each value specifies where in time that point occurs. More points give a smoother curve.
Accessibility & performance
Spring animations create oscillating motion that can be disorienting for users with vestibular disorders. Always wrap spring-animated elements in a prefers-reduced-motion check. Performance is identical to cubic-bezier — the browser resolves the curve mathematically and composites the animation on the GPU. The longer linear() definition doesn't affect runtime performance at all.