Easing Visualizer

Canvas

A cubic-bezier curve defines how CSS animations interpolate between values. The x-axis is time; the y-axis is the animated value. Adjust the control points or pick a preset, then hit play.

Controls

x10.25

y10.1

x20.25

y21

duration1200ms

cubic-bezier(
0.25, 0.1,
0.25, 1
)

concepts

cubic-bezier(x1, y1, x2, y2)

A cubic Bézier with fixed endpoints at (0,0) and (1,1). P1 and P2 are the "handles" that bend the curve between those anchors.

X = time, Y = value

The X-axis is animation progress from 0→1; the Y-axis is the interpolated output value. Moving Y outside [0, 1] creates overshoot (Y > 1) or undershoot (Y < 0).

solving for Y at time X

The curve is parametric — you get (x, y) at parameter t, but the browser needs y at a specific x. Newton–Raphson iteration finds the t that gives the desired x.

X constraints

x1 and x2 must stay in [0, 1] to keep time monotonically increasing. Y values have no constraint — negative Y and Y > 1 are both valid and produce bounce/elastic effects.

core pattern

cubic-bezier(x1, y1, x2, y2)
  x1, x2 ∈ [0, 1]  time handles (must be monotonic)
  y1, y2 ∈ any     value handles (can overshoot)

ease-out-back:
  cubic-bezier(0.34, 1.56, 0.64, 1)
                         ↑ y1 > 1 → overshoots the target

Newton–Raphson (solve for t given x, ~10 iterations):
  t -= (Bx(t) - x) / Bx_prime(t)
  return By(t)