by Erf Studio
Easing Curve Studio
Draw cubic-bezier easing curves, preview the motion, browse and favourite a searchable preset library, and copy CSS, raw points or an After Effects expression.
Runs entirely in your browser. Nothing is uploaded.
How to use
- Load a curve from the searchable preset library, or drag the two handles to shape your own.
- Press Play to watch the motion, and star the curves you reuse to keep them in Favourites.
- Copy the CSS cubic-bezier, the raw points, or a ready After Effects expression.
Examples
- Grab ease-in-out for safe UI motion, or back-out for a confident overshoot on a logo settle.
- Drag a handle past the top of the box to build custom overshoot, then favourite it for the whole project.
- Search "expo" to compare the exponential curves side by side before committing.
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 I use the After Effects expression?
Copy it and paste it onto an animated property that has two keyframes. It solves the same cubic-bezier between those keyframes, so After Effects eases exactly like the CSS curve.
Where are my favourites stored?
In your browser only. Starred curves persist on this device, and nothing is uploaded.
