Easing curve fundamentals
How cubic-bezier shapes motion, attention, and perceived performance.
The four control points
Every cubic-bezier curve is defined by two endpoints fixed at (0,0) and (1,1), plus two control points (x1,y1) and (x2,y2). The x-axis represents time; the y-axis represents progress. Control points can pull the curve outside the 0–1 range, creating overshoot.
Standard presets
ease0.25, 0.1, 0.25, 1.0
Smooth start, gentle end
ease-in0.42, 0.0, 1.0, 1.0
Slow start, fast finish
ease-out0.0, 0.0, 0.58, 1.0
Fast start, slow finish
ease-in-out0.42, 0.0, 0.58, 1.0
Slow at both ends
Overshoot and bounce
When y-values exceed 1.0, the animation overshoots its target before settling. A classic back-out curve — cubic-bezier(0.34, 1.56, 0.64, 1) — creates a satisfying snap. Bounce effects chain multiple curves or use spring physics, but a single cubic-bezier with extreme y2 values can approximate a single bounce.
Perceived performance
Users perceive an animation as faster when it decelerates into its final position. An ease-out curve on enter transitions and an ease-in curve on exit transitions create a responsive feel. Avoid linear curves for UI motion — they feel mechanical and jarring.
Tailwind integration
Extend your Tailwind config with custom easing curves under theme.extend.transitionTimingFunction. Reference them as ease-spring or ease-bounce in className strings. This keeps motion tokens centralized and consistent across the design system.