Cubic Bezier Easing Builder

Reading a cubic bezier curve

An easing curve maps time to progress. The horizontal axis is time, from the start of the animation on the left to the end on the right. The vertical axis is how far along the property is. A straight diagonal is linear motion: equal distance every frame. Anything steeper means faster, anything flatter means slower.

cubic-bezier(x1, y1, x2, y2) defines that curve with two control points. The start is always fixed at 0,0 and the end at 1,1; you only move the two handles in between. The first handle shapes how the motion leaves the start, the second shapes how it arrives. X values must stay between 0 and 1 because time cannot run backwards, but Y can go anywhere, which is how overshoot works.

The three families you actually need

• Ease-out (fast start, gentle stop) for anything entering the screen or responding to a click: menus, toasts, modals. It feels responsive because most of the movement happens immediately. cubic-bezier(0.22, 1, 0.36, 1) is a strong default.
• Ease-in (slow start, fast finish) for elements leaving. Use it sparingly and keep it short, since the slow start reads as lag.
• Ease-in-out for things that move from one place on screen to another, like a carousel slide or a reordered card.

Overshoot without a library

Drag a handle above the top line and the animated block will sail past its target and settle back. That is easeOutBack, roughly cubic-bezier(0.34, 1.56, 0.64, 1). Keep overshoot subtle for UI (y between 1.1 and 1.6); bigger values look cartoonish. Pulling the first handle below zero gives anticipation, a small wind-up before the move.

:root {
  --ease-out-strong: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.drawer {
  transform: translateX(100%);
  transition: transform 420ms var(--ease-out-strong);
}
.drawer.open { transform: none; }

Taking the curve to GSAP

GSAP does not read cubic-bezier() strings directly, but its CustomEase plugin accepts SVG path data. The GSAP output above writes the exact path for your curve, registers it under a name, and uses it in a tween. Below that, it suggests the nearest built-in ease, found by sampling your curve and every standard GSAP ease (power1 to power4, sine, expo, circ and back) and picking the one with the smallest average difference. If the match is close, use the built-in: it is one less thing to register and every GSAP developer will recognize it.

Duration matters as much as the curve

The same ease feels completely different at 200ms and 800ms. Use the duration slider to judge the curve at the speed you will ship. Interface feedback usually lives between 150 and 300ms; larger panels and page transitions between 350 and 600ms. Respect prefers-reduced-motion by shortening or removing non-essential movement for people who ask for it.

Frequently asked questions