Spring Physics vs Cubic Bezier: When to Use Each in UI

What each model controls

A cubic-bezier curve maps time to progress over a fixed duration. You choose the curve and the duration, and the animation always takes that long. A spring simulates a mass attached to a target by a spring and a damper. You choose stiffness, damping and mass, and the animation settles when the physics says it is done. The first is a path; the second is a behaviour.

When cubic-bezier is the better choice

Bezier curves are excellent for short, predictable transitions that nobody interrupts: a tooltip fade, a colour change, a simple opacity reveal, a progress bar with a known duration. They are also easier to hand off as CSS and easier to match exactly across design and code. Material Design still publishes easing and duration pairs for transitions, even as it moves component motion to springs.

• Fixed-duration sequences with a known start and end
• Simple opacity, colour or small position changes
• Cases where a CSS-only implementation is enough
• Motion that must match a video or a specification exactly

When spring physics wins

Springs are better when the user can grab, reverse or interrupt the motion. A sheet that follows a drag, a toggle that can be tapped again mid-flight, a card that returns from a fling: these need the current position and velocity, not a restart. Springs also make a component feel consistent at different distances because the settle is governed by physics rather than a fixed timer.

• Gestures with velocity, such as swipe, drag and fling
• Interruptible transitions between two stable states
• Components that can be reversed mid-motion
• Motion that should feel consistent across different distances

Mapping one to the other

You can approximate a spring with a bezier curve for a non-interruptible case, and Material publishes web conversion curves for its spring tokens. The approximation breaks when the motion is interrupted, because a bezier has no concept of current velocity. If you need interruption, use a real spring. If you only need a visual match for a fixed sequence, a curve is simpler.

Performance and implementation

Both can be efficient if you animate transform and opacity rather than layout properties. Springs update every frame, so a poorly written spring that triggers React renders can be expensive. Use a library or runtime that drives the animation outside the render loop. CSS bezier transitions are handled by the browser and are often the cheapest option for simple cases.

A practical rule

Start with the interaction. If a finger is involved or the motion can be reversed, use a spring. If the motion is a short, one-way transition with no input, use a bezier. Then test interruption, reduced motion and a mid-range device. The correct model is the one that still behaves well when the user does something unexpected.