Easing

Easing functions as CSS

44 easing curves, each with its progress curve, its velocity curve, a live demo and the code to copy: the CSS linear() string, the nearest cubic-bezier(), and the Web Animations line. Every number on these pages is computed from the vawe motion library.

vawe After Effects eases CSS keywords Classic eases

Why vawe uses After Effects speed and influence

A cubic-bezier() is four numbers with no meaning you can read. An After Effects keyframe has two handles with two meanings each. Influence is how far along the segment the handle reaches, in per cent of its duration. Speed is the pace at the key, as a multiple of the segment's average. A designer can say “leave fast, arrive on a long soft stop” and set two handles.

We read the handles of 1,339 real segments from Lottie files and 27 from HyperFrames blocks. The nine vawe names are the pairs that real work uses. Each is exact as a cubic bezier and ships as a linear() string that runs in any browser.

65%of segments keep both handles at an After Effects default, linear or Easy Ease. 468 are tuned.
26%of the 616 entrances end on a long dead stop (influence 55 or more, speed 0).
0of the 57 exits end faster than 1.5x the average. Real exits slow down.
2,678handles measured, from Apache-2.0 and MIT Lottie sources.

vawe After Effects eases

Nine names for nine handle pairs, used as EASE.land in a page. Each page shows the handles and how many real segments sit near them.

land50% at 14% / peak 4.8x
landSoft50% at 19% / peak 2.81x
settle50% at 50% / peak 2.5x
swap50% at 50% / peak 4x
glide50% at 51% / peak 1.47x
carry50% at 77% / peak 4.79x
leave50% at 40% / peak 1.95x
launch50% at 77% / peak 3x
pop50% at 17% / peak 4.79x

CSS keywords

The five names CSS gives you without a function: ease, ease-in, ease-out, ease-in-out and linear.

ease50% at 29% / peak 2.29x
ease-in50% at 66% / peak 1.72x
ease-out50% at 34% / peak 1.72x
ease-in-out50% at 50% / peak 1.72x
linear50% at 50% / peak 1x

Classic eases by family

The 30 Penner easings from easings.net: ten families in three directions. Eight families can be drawn by one cubic-bezier(); elastic and bounce cannot, so they ship as linear().

sine quad cubic quart quint expo circ back elastic bounce

sine: The gentlest curves.

easeInSine50% at 67% / peak 1.57x
easeOutSine50% at 33% / peak 1.57x
easeInOutSine50% at 50% / peak 1.57x

quad: Mild and even.

easeInQuad50% at 71% / peak 2x
easeOutQuad50% at 29% / peak 2x
easeInOutQuad50% at 50% / peak 2x

cubic: The usual default.

easeInCubic50% at 79% / peak 3x
easeOutCubic50% at 21% / peak 3x
easeInOutCubic50% at 50% / peak 3x

quart: A strong ease.

easeInQuart50% at 84% / peak 4x
easeOutQuart50% at 16% / peak 4x
easeInOutQuart50% at 50% / peak 4x

quint: A very strong ease.

easeInQuint50% at 87% / peak 5x
easeOutQuint50% at 13% / peak 5x
easeInOutQuint50% at 50% / peak 5x

expo: An extreme ease.

easeInExpo50% at 90% / peak 6.93x
easeOutExpo50% at 10% / peak 6.93x
easeInOutExpo50% at 50% / peak 6.92x

circ: A geometric, wall-like stop.

easeInCirc50% at 87% / peak >20x
easeOutCirc50% at 13% / peak >20x
easeInOutCirc50% at 50% / peak >20x

back: Passes or pulls past its ends.

easeInBack50% at 87% / peak 4.7x
easeOutBack50% at 13% / peak 4.7x
easeInOutBack50% at 50% / peak 5.59x

elastic: Rings around the end value.

easeInElastic50% at 96% / peak 15.39x
easeOutElastic50% at 4% / peak 15.39x
easeInOutElastic50% at 50% / peak 10.12x

bounce: Rebounds off the end value.

easeInBounce50% at 74% / peak 5.5x
easeOutBounce50% at 26% / peak 5.5x
easeInOutBounce50% at 50% / peak 5.49x