Shape the motion.

Compare two CSS easing curves at the same duration. Drag a handle, scrub the timeline, and copy the CSS when it feels right.

Easing curve

CustomReference

Drag either handle or edit its coordinates. Output coordinates outside 0–1 can create an overshoot.

Custom0%

Reference0%

Elapsed 0%

Load a preset

Handle 1X₁Y₁

Handle 2X₂Y₂

Reference curve Duration (ms)

Try the same curve on an entering panel and a tab indicator, then adjust the duration for each interaction.