CSS cubic-bezier vs spring animations: choosing and exporting better motion

A drawer, button and notification rarely need the same motion. The Cubic-Bézier & Spring Physics Studio lets you compare timing curves against linear motion before putting them into an app.

Use cubic-bezier for a fixed duration

CSS cubic-bezier(x1, y1, x2, y2) maps time to animation progress. The x coordinates must stay between 0 and 1. The y coordinates can leave that range: a negative value creates anticipation, while a value above 1 can create overshoot.

Start with ease-out for an entering element or ease-in-out for a state change. Drag either control point, or type exact coordinates. Paste an existing cubic-bezier value to adjust it without starting again. Compare Slide, Scale, Rotate, Pop and Fade: a curve that feels lively for movement can feel distracting for opacity.

Use springs for bounce and physical response

• Stiffness controls the restoring force: higher values generally move faster.
• Mass adds inertia: more mass generally slows the response.
• Damping removes energy: low values produce more oscillation; excessive damping can make motion slow.
• Initial velocity changes the starting motion, in normalized progress units per second.

The damping ratio helps compare settings. Below 1 is underdamped and can bounce. At 1 the spring is critically damped. Above 1 it is overdamped. Starting velocity can still cause overshoot even in a critically damped spring.

Use Bouncy for an expressive interaction or Gentle for a quieter transition, then adjust the values. Check the overshoot and settling time rather than relying on the preset name alone.

Export for your platform

The CSS tab exports a transition. Cubic-bezier works in widely supported browsers; a spring needs a sampled linear() easing function supported in modern browsers. Use the Keyframes tab as an alternative for older browsers. Sampling approximates the physical curve rather than running a spring simulation.

Tailwind v4 uses a custom --ease-* theme token. Cubic-bezier exports also include a Tailwind v3 configuration. The JavaScript tab provides Web Animations and Motion examples; spring settings also include react-spring. Native examples cover SwiftUI and Android. Frameworks can use different rest thresholds, so compare the actual result on your target device.

A spring with zero damping never comes to rest. Very slow springs may also exceed the studio's ten-second sampling limit. A warning marks these cases: their CSS export ends at the target at the cap, whereas a physical spring may continue moving.

Put easing into a complete animation

Use the CSS Animation Generator to define keyframe states and insert your exported timing function. The CSS Transform Playground helps find the final position, scale or angle. Test the finished result in the HTML/CSS/JS Live Preview.

Keep motion short and purposeful. Respect prefers-reduced-motion in your app; the studio pauses automatic playback when that preference is enabled. All calculations and exports stay on your device.