Subtle spring (Y1=1.2)
- Input
- Escala ou translate de elemento entrando
- Expected output
- transition: transform 320ms cubic-bezier(0.34, 1.2, 0.64, 1);
Soft overshoot. Works well for icons, badges and toasts.
cubic-bezier spring overshoot CSS elastic animation
Spring and overshoot with CSS cubic-bezier: spring effect without JavaScript
One of the least known capabilities of CSS `cubic-bezier()` is that the Y control points are not restricted to the [0,1] range. When Y exceeds 1 or goes below 0, the animation overshoots the end point and returns — creating the spring/bounce effect without any JavaScript.
How overshoot works mathematically
- The bezier curve maps t (0→1) to both X (time) and Y (progress). X must stay in [0,1] because time only moves forward. Y can exit this range — the browser animates beyond the final value and then returns. `cubic-bezier(0.34, 1.56, 0.64, 1)` is one of the most used formulas for a smooth spring: Y1=1.56 creates the overshoot.
- The degree of overshoot is controlled by how much Y1 exceeds 1. Y1=1.2 creates a subtle touch. Y1=2.0 creates an exaggerated bounce. For double bounce effects (jello-style), pure CSS cubic-bezier is not enough — it requires @keyframes with multiple intermediate frames.
Spring values by intensity
Medium spring (Y1=1.56)
- Input
- Modal ou drawer entrando
- Expected output
- transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
Popular formula for drawers and menus. Personality without excess.
Full tool FAQ
It's a mathematical function that defines how a CSS animation accelerates and decelerates over time. The four parameters (x1, y1, x2, y2) describe the control points of a cubic curve.
Frequently asked questions
Which properties work well with spring overshoot?
Transform (scale, translate) and opacity work best because they are composited by the GPU. Avoid spring on layout properties like width, height, padding — they trigger reflow and the effect becomes choppy.
Is CSS spring the same as framer-motion spring?
No. Framer-motion uses real spring physics (mass, stiffness, damping) calculated frame by frame. CSS cubic-bezier is a convenient approximation. For sophisticated effects with multiple bounces or velocity-dependent behavior, JavaScript is necessary.