Easing Curve Editor

📖 Tool Introduction

The Easing Curve Editor is a free online tool that helps front-end developers and motion designers visually tune the cubic-bezier easing function. In CSS animation the animation-timing-function decides how an element accelerates and decelerates over time, and traditionally you could only fine-tune it by guessing the coordinates of four numbers, which is far from intuitive. This tool turns those four parameters into two handles you can drag directly on a canvas: P0 stays fixed at the bottom-left (0,0) and P3 stays fixed at the top-right (1,1). With a mouse or a finger you simply drag the blue and green control points, and the curve is redrawn in real time by the cubic Bezier parametric equation while the matching cubic-bezier code is shown alongside. Below the canvas a small ball rolls from left to right strictly following the easing curve you have drawn, so you can feel the rhythm that this curve gives to a real animation. The tool ships with six common presets — ease, linear, ease-in, ease-out, ease-in-out and a back overshoot — that you can apply with one click. All curve drawing and easing inversion happen locally in your browser, touch dragging is supported, and the interface is available in Simplified Chinese, Traditional Chinese and English. Because the preview ball inverts the same parametric curve the browser uses, what you tune here is exactly the motion you will ship, with no surprise between the editor and production. There is nothing to install and no account to create, so the page stays lightweight and opens instantly on any modern browser during everyday interface polish work.

✨ Key Features

• Canvas handles: drag P1 and P2 directly and the curve follows your finger in real time, true to what you see
• Parametric sampling: plots the path point by point from the cubic Bezier formula, mathematically exact
• Real easing preview: the ball rolls by inverting the curve y-value over time, matching real motion
• Six common presets: ease, linear, ease-in, ease-out, ease-in-out and back applied in one tap
• Overshoot support: the y-axis may go beyond 0 to 1 for bouncey and springy entrances
• One-click code: generates a rounded cubic-bezier value ready to paste straight into your project

📝 How to Use

1. Drag the blue handle P1 and the green handle P2 with your mouse or finger to shape the curve
2. Watch the ball below and judge whether the easing rhythm feels right
3. Tap a preset on the right when you want a classic rhythm such as ease-out
4. Check the cubic-bezier numbers in the code box, then click copy code
5. Paste the copied value into animation-timing-function in your project and you are done

⚠️ Notes

• x range: control point x is clamped between 0 and 1 so time always advances monotonically
• y range: y may sit between -0.5 and 1.5; going beyond 0 to 1 creates an overshoot bounce
• Easing inversion: the ball preview solves the parameter t by bisection, matching the real browser easing
• Touch friendly: the canvas uses Pointer events, so phones and tablets can be used for tuning
• Fully local: all drawing and inversion happen in the browser with no network request at all