cubic-bezier easing
The curve, as a table you can actually read.
- curve
- 0
Output
Type four numbers — 0.42, 0, 0.58, 1 — or pick one of the named curves.
Your files stay on your device
This tool runs entirely in your browser. What you paste is processed on your device and is never sent to a server, so it is safe to use with tokens, keys and unpublished text.
How it works
- Pick a named curve, or type four numbers.
- Read the table: how far through the movement is at each tenth of the time.
- Set the duration to the one you are actually animating over, so the milliseconds mean something.
- Copy the timing function.
Frequently asked questions
- Why print a table instead of drawing the curve?
- Because the question is almost always “is it too slow at the start” or “does it arrive too abruptly”, and a table of progress against time answers that directly. A drawn curve looks nice and still has to be read off by eye.
- What do the four numbers mean?
- Two control points: x1, y1, x2, y2. The x values are time and must be between 0 and 1. The y values are progress and may go outside it — that is exactly what makes a curve overshoot and spring back.
- Which should I use?
- For something entering the screen, ease-out: fast at first, settling at the end. For something leaving, ease-in. ease-in-out for a move between two places. Linear for a spinner and almost nothing else.
- What is a back curve?
- One that overshoots past its destination and comes back — the small bounce that makes a dialog feel physical. Use it on small, fast movements; on a big one it reads as a mistake.
- Is anything sent to a server?
- No. It runs in your browser, so what you type stays on your computer.