# Why are spring animations better than cubic-bezier transitions?

> Springs are better for interactive UI because they can start from the element's current speed and position, so interrupted animations and released gestures continue smoothly. They also feel natural with few settings. Cubic-bezier curves are still fine, and simpler, for fades, colour changes and motion that is never interrupted.

Updated October 2026. Source: https://www.exodeui.com/questions/why-are-spring-animations-better-than-cubic-bezier/

## Key takeaways

- A cubic-bezier curve has a fixed duration and shape
- A spring is defined by stiffness, damping and mass, and settles when physics says so
- Springs carry velocity, so interruptions and gestures stay smooth
- Beziers are simpler and work well for fades and non-interactive transitions
- Many modern platforms, including SwiftUI, default to springs

## Frequently asked questions

### Can CSS do spring animations?

CSS has no physical spring, but the linear() easing function can approximate a spring curve for a fixed duration. It does not carry velocity between interruptions.

### What are good spring settings for UI?

Start with no or little overshoot for most UI and a small bounce for playful elements. Tune by feel on a real device.

### Are springs slower to run?

Not noticeably in modern libraries and runtimes. The cost is mostly in the rendering of what moves, not the spring maths.

### Should every animation be a spring?

No. Use springs for movement and interaction, and simple easing for fades and colour changes.

## Related

- [Spring animation generator](https://www.exodeui.com/tools/spring-animation-generator)
- [Cubic-bezier editor](https://www.exodeui.com/tools/cubic-bezier-editor)
- [Figma Smart Animate vs springs](https://www.exodeui.com/questions/figma-smart-animate-vs-spring)
- [Spring animation explained](https://www.exodeui.com/learn/spring-animation)