Easing Curve Editor
Drag two control points to shape a cubic-bezier easing curve and preview the motion instantly. Copy the CSS or a JavaScript function for your website or game.
Control points
How to use
When it helps
A button popping out or a character jumping feels good only when its speed changes naturally. The easing curve defines that change in speed, and the web and many game engines describe it with four cubic-bezier numbers.
Numbers alone are hard to picture, so this tool lets you drag the curve and see right away how the ball moves. Set y below 0 or above 1 to get springy motion that pulls back before starting or overshoots and settles.
Take it to CSS as a transition-timing-function value, or to game code as a JavaScript function that returns progress for a time from 0 to 1. The function is kept short so it is easy to port to other languages.
FAQ
Why are x values limited to 0 to 1?
x is the time axis and cannot go backwards, so CSS requires it to be between 0 and 1. y has no limit, which is how you get bounce effects.
How do I use the JS function?
Create it with const ease = cubicBezier(x1, y1, x2, y2), then pass a time from 0 to 1 to ease(t) to get progress. Position = start + (end - start) × ease(t).
Can I use it in Unity or Godot?
The math in the copied function is the same in any language, so you can port it to C# or GDScript. Godot's Tween has its own easings, so use this to pick a similar preset.
What about springs that bounce several times?
A cubic-bezier can only overshoot once and come back. Multiple bounces need a spring calculation or keyframes.