Motion
Keyframe Easing Visualizer
Shape, preview and copy cubic-bezier easing curves for After Effects, CSS or your NLE.
Runs entirely in your browser. Nothing is uploaded.
How to use
- Start from a preset like ease, ease-in-out or snappy to get close to the feel you want.
- Drag the two handles on the curve to fine-tune the acceleration and deceleration.
- Press Play to watch a dot move with that easing in real time.
- Copy the ready value for CSS, the ease percentages for After Effects, or the raw points for any NLE.
Examples
- A gentle ease-in-out softens both ends of a move, the safe default for UI and title animation.
- Pulling the first handle low and the second high makes a snappy curve that starts slow and arrives fast, good for confident reveals.
- Dragging a handle past the top of the box creates overshoot, the bouncy settle that makes a logo sting feel alive.
Frequently asked questions
What is a cubic-bezier curve?
It is the standard way to describe easing, four numbers defining two control handles between a fixed start and end. The shape of the curve is exactly how speed changes over the length of the animation.
How do the After Effects values map across?
After Effects uses ease influence percentages rather than bezier points. The tool converts the handle positions into approximate in and out ease percentages so you can dial similar keyframes by hand.
Can I get overshoot or anticipation?
Yes. Drag a handle above the top edge for overshoot or below the bottom for anticipation. CSS and most NLEs accept those out-of-range values to create bounce and wind-up.
