Crafting easing curves for user interfaces

Since the introduction of flat design, the quality of animation has never been more essential for creating great interfaces. Through motion design, you can influence the overall brand experience of a product and set it apart from the market. Animation can simplify complex interactions and turn good designs into memorable user experiences.

But how do you create quality animation? With easing curves, you can take a decent animation and make it fantastic.

The problem is that understanding how easing curves work can be confusing. I hope to clear that up through this post, which stems from the interest in timing functions from an article I wrote about 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 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. It’s defined as Percent of Animation(Y) over Time(X).

So what does 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’s the space between each percent of animation. Below I’ve shown how this spacing relates to an easing curve. Think of vertical = fast and horizontal = slow.

Linear ease spacing

Within linear easing, the space the dot travels is equidistant across the length of the animation. (View on CodePen)

Ease-in spacing

With ease-in spacing, the spacing of the dot is more condensed in the beginning and expands as the animation continues, giving the illusion of starting slow and speeding up. (View on CodePen)

Ease-out spacing

With ease-out spacing, the spacing of the dot starts large and condenses in the end, giving the illusion of starting fast and slowing down. (View on CodePen)

Designing an easing curve

People always ask me, “What easing curve do I use and when?”

Well, it really depends on the scenario.

There isn’t one easing curve that works for absolutely everything. Crafting easing curves is a key component of designing motion. Easing curves are commonly designed after physics within the real world, but they don’t always follow those rules.

The real world is a great place to gain inspiration for animation. For example, no object in the real world starts at full velocity and immediately stops like a linear easing curve does. Objects always have some kind of acceleration or deceleration. This is just one of the many concepts Disney outlines in the 12 Principles of Animation, which is largely based on physics and the exaggeration of physics.

When crafting an easing curve, keep in mind that vertical is fast and horizontal is slow. The curve you create should be dependent on the interaction you’re designing. You can create many different types of curves within the (X,Y) grid.

And when you’re crafting curves within the frame, it’s possible to break the frame! Breaking the frame will cause the animation to go outside of the values in between the keyframes. Breaking the frame can create bounce or anticipation effects.

There are many tools for creating cubic beziers on the web. Here are a few:

• cubic-bezier.com
• Cesear
• Easings.net

Easing curves within development

Easing curves within development are called timing functions—they’re mathematical equations that create a bezier curve that defines the acceleration pattern on a graph. The function that is commonly used within development is the cubic bezier.

Within most programming languages, there are some predefined easing curves like ease in, ease out, and ease in out. Be sure to check the documentation to see which curves are predefined. Below I listed the easing curves that are predefined within CSS:

• ease-in = cubic-bezier(.42, 0, 1, 1)
• ease-out = cubic-bezier(0, 0, .58, 1)
• ease-in-out = cubic-bezier(.42, 0, .58, 1)

Defining easing curves in CSS

Global

In CSS there’s the “global” ease that can be defined in the object class. This applies the same ease to every keyframe. For example, if you have a bounce, the animation will bounce at every keyframe.

Per keyframe
You can get more precise with eases by defining them within keyframes. Keep in mind that the easing curve is defined in the percentage value before you want the ease to happen.

Curved delays
The concept of easing curves doesn’t just apply to a single animation—you can apply it to delays, too. And that can be really fun when there are many elements animating on the screen. Here’s an example of a sine wave delay. I made this by creating a sass loop and using compass math helpers to calculate sine.

Now that you have a clearer picture of how easing curves work, how will you use them to create great user interfaces?

This post was originally published on Medium.