Find the curve. Feel the motion.
24 easing functions computed by the same evaluator as the studio. Open a curve to replay it, copy its CSS or apply it to a headline.
Easing functions cheat sheet
Linear
linearConstant speed from start to finish. It reads as mechanical, which is sometimes the point.
Ease in sine
sine.inA gentle sinusoidal change in speed. Accelerates away from the starting value.
Ease out sine
sine.outA gentle sinusoidal change in speed. Decelerates into the final value.
Ease in out sine
sine.inOutA gentle sinusoidal change in speed. Accelerates through the first half and decelerates through the second.
Ease in quad
quad.inA mild acceleration away from the start. Used for fading out, so the layer goes before the eye follows it.
Ease out quad
quad.outA mild deceleration. ramin uses it for opacity so a layer becomes visible before it finishes moving.
Ease in out quad
quad.inOutA mild quadratic change in speed. Accelerates through the first half and decelerates through the second.
Ease in cubic
cubic.inA stronger cubic change in speed. Accelerates away from the starting value.
Ease out cubic
cubic.outA gentle deceleration into place. Smooth, with no overshoot.
Ease in out cubic
cubic.inOutA stronger cubic change in speed. Accelerates through the first half and decelerates through the second.
Ease in quart
quart.inA pronounced fourth-power change in speed. Accelerates away from the starting value.
Ease out quart
quart.outA pronounced fourth-power change in speed. Decelerates into the final value.
Ease in out quart
quart.inOutA pronounced fourth-power change in speed. Accelerates through the first half and decelerates through the second.
Ease in expo
expo.inAn exponential change in speed, with a sharp contrast between slow and fast. Accelerates away from the starting value.
Ease out expo
expo.outStarts very fast and brakes hard into the final position. It reads as sharp and confident, with no overshoot.
Ease in out expo
expo.inOutAn exponential change in speed, with a sharp contrast between slow and fast. Accelerates through the first half and decelerates through the second.
Ease in circ
circ.inA circular arc with a steep change in speed near one end. Accelerates away from the starting value.
Ease out circ
circ.outDecelerates along a quarter circle: fast at first, then a long, soft landing.
Ease in out circ
circ.inOutA circular arc with a steep change in speed near one end. Accelerates through the first half and decelerates through the second.
Ease in back
back.inAnticipates or overshoots the target before settling. Accelerates away from the starting value.
Ease out back
back.outStarts fast, travels a little past the target and settles back onto it. The overshoot percentage is how far past it goes.
Ease in out back
back.inOutAnticipates or overshoots the target before settling. Accelerates through the first half and decelerates through the second.
Ease out elastic
elastic.outSwings past the target and back several times before it rests, like something on a rubber band.
Ease out bounce
bounce.outHits the target and rebounds off it a few times, each rebound smaller, like a dropped ball.
Tuning a spring?
Springs have no fixed duration. Set stiffness, damping and mass in the spring animation playground and see how long the motion takes to settle and how far it overshoots.
Timing given in frames?
Convert a frame count at 24, 25, 30, 50 or 60 fps to seconds and milliseconds, or a duration back to whole frames, with the frames to time calculator.
Timing a sequence?
Work out the delay between elements and the total length of a staggered entrance with the stagger animation calculator.