Since the introduction of flat design, the quality of animation has never been more essential for creating great interfaces. Through motion design, one can influence the overall brand experience of a product and set it apart from the market. Animation can make complex interactions simple and turn good designs into memorable user experiences. But how does one create quality animation? Easing curves are one of the many core components that takes a decent animation and makes it fantastic!

The problem is that understanding how easing curves work can be a bit confusing. I hope to clear that up through this post, which stems from the interest in timing functions my previous article After Effects to CSS. People wanted a better understanding about how easing curves work and how to design your own.

An easing curve is a line that defines the acceleration pattern on a graph. Easing curves are commonly referred by many other names such as Motion Curves, Timing Functions, Bezier Curves or just Curves. The different shapes of an easing curves also have keywords like ease in, ease out, or ease in out.

How Easing Curves Work

Easing curves are created via an X,Y axis. The meanings of the X and the Y can vary from application to application. Within development, the meaning of the X and the Y states stays pretty consistent. Which is defined as Percent of Animation(Y) over Time(X).

What does that this easing curve look like when put into practice? That’s where the concepts of timing and spacing come into play.

Timing and Spacing

Timing is the duration for an animation to finish. Spacing is the space between each “frame” but in our case it is the space between the each percent of animation. Below I have showcased how this spacing relates to an easing curve. Think of vertical = fast and horizontal = slow.

Linear Ease Spacing

Within linear easing the spacing of the dot travels is equidistant across the length of the animation. View on CodePen