Tool

Easing Designer

Shape a cubic-bezier curve by dragging its two control points, then feel the timing on real animations looping live. Load a preset, tune it, and export the curve as rawcubic-bezier(), a CSS transition, or a Motion transition snippet.

cubic-bezier(0.22, 1, 0.36, 1)

P1 0.22, 1P2 0.36, 1

Presets

Drag either handle, or focus one and nudge with the arrow keys (hold Shift for larger steps). Control-point X is clamped to 0–1; Y can overshoot for spring and anticipation.

Live preview

Forge

Move

Scale

Rotate

Width

Duration900ms

cubic-bezier(0.22, 1, 0.36, 1)