Easing curve visualizer
Drag the handles, watch the motion and copy cubic-bezier(), linear(), GSAP or Framer Motion code. Springs included.
See the motion before you ship it
Easing is what separates motion that feels natural from motion that feels mechanical. The default ease is fine, but the details matter: menus feel snappier with a fast start and a long settle, modals feel friendly with a slight overshoot, and toasts feel heavy or light depending on a few numbers. Tweaking four numbers in code and refreshing the page is a slow way to find them.
Drag the two handles on the curve, pick a preset or type exact values and watch a ball move with your easing. The tool outputs the CSS cubic-bezier() and linear() forms, a GSAP CustomEase path and a Framer Motion array. The Spring tab simulates a damped spring from stiffness, damping and mass, tells you whether it is underdamped (bounces), critically damped or overdamped, shows the overshoot and settle time, and converts it to a linear() easing that works in plain CSS, with no JavaScript animation library.
Motion guidelines
- Ease-out (fast start, slow end) suits things entering the screen; ease-in suits things leaving.
- Keep UI transitions between 150 and 300 ms; longer feels sluggish, shorter is not perceived.
- Animate
transformandopacity; they are cheap for the browser. - Honour
prefers-reduced-motionfor users who are sensitive to movement.
The curves are computed in your browser and nothing is sent anywhere.
Frequently asked questions
What do the four numbers in cubic-bezier() mean?
They are the two control points (x1, y1) and (x2, y2) of a Bรฉzier curve from (0, 0) to (1, 1). The x axis is time and the y axis is progress. x values must stay between 0 and 1; y values may go outside that range to overshoot.
How do I make a bounce or overshoot?
Use a y value above 1 for the second control point, as in easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1). The animated value passes its target and settles back.
What is CSS linear() easing?
The linear() function takes a list of points and interpolates between them, so it can describe any curve, including a spring with several bounces, which cubic-bezier cannot. It is supported in all current major browsers.
What do stiffness, damping and mass do in a spring?
Stiffness is how hard the spring pulls toward the target, damping is the friction that stops oscillation and mass is the weight being moved. Low damping gives bounces; high damping settles without overshoot.