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.
Carregando ferramenta… / Loading tool…
cubic-bezier spring overshoot CSS elastic animation
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.
Soft overshoot. Works well for icons, badges and toasts.
Popular formula for drawers and menus. Personality without excess.
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 two control points of a cubic Bézier curve, while the start (0,0) and end (1,1) are fixed. The shape of the curve between those points is what gives the movement its personality.
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.
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.
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);CSS is generated locally in your browser.