Webmasters Gallery

Let’s take a look at a carousel I worked on where items slide in and out of view with CSS animations. To get each item to slide in and out of view nicely I used a cubic-bezier for the animation-timing-function property, instead of using a standard easing keyword.

See the Pen Carousel with reversed easing curve by Michelle Barker (@michellebarker) on CodePen.

A cubic-bezier can appear confusing at first glance, but when used correctly, it can add a nice touch to the user experience.

While building this carousel, I realized I not only needed a custom animation curve, but had to use it in reverse as well to get the effect right. I figured it was worth sharing what I learned because creating a custom curve and reversing it may seem tricky, but it’s actually pretty straightforward.

First, a primer on easing

Easing is the word used to describe the acceleration and deceleration of an animation’s progress along a timeline. We can plot this as a graph, where x is time and y is the animation’s progress. The graph for a linear animation, which has no acceleration or deceleration (it moves at the same speed all the way through), is a straight line:

Non-linear easing is what gives animations a more natural, life-like feel. We can apply easing to transitions and animations in CSS. The animation-timing-function property allows us to define the easing on an animation. (The same options are available for transition-timing-function.) We have four keywords to choose from:

• linear – as described above
• ease-in – the animation starts off slow and accelerates as it progresses
• ease-out – the animation starts off fast and decelerates towards the end
• ease-in-out – the animation starts off slowly, accelerates in the middle and slows down towards the end
• ease – the default value, a variant on ease-in-out

Getting to know cubic-bezier

If none of those options suit our animation, we can create a custom easing curve using the cubic-bezier function. Here’s an example:

.my-element {
  animation-name: slide;
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.45, 0.25, 0.60, 0.95);
}

If we prefer, we can write these properties as shorthand, like this:

.my-element {
  animation: slide 3s cubic-bezier(0.45, 0.25, 0.60, 0.95);
}

You’ll notice the cubic-bezier function takes four values. These are the two pairs of coordinates needed in order to plot our curve onto the graph. What do those coordinates represent? Well, if you’ve used vector illustration programs, like Illustrator, the idea of vector points and “handles” that control the size and direction of the curve might be familiar to you. This is essentially what we’re plotting with a cubic-bezier curve.

We don’t need to know about all the maths behind cubic-bezier curves in order to create a nice animation. Luckily there are plenty of online tools, like cubic-bezier.com by Lea Verou, that allow us to visualize an easing curve and copy the values. This is what I did for the above easing curve, which looks like this:

Here, we can see the two points we need to plot, where the cubic-bezier function is cubic-bezier(x1, y1, x2, y2).

Applying easing in two directions

My carousel rotates in both directions — if you click the left arrow, the current item slides out of view to the right, and the next item slides in from the left; and if you click the right arrow, the reverse happens. For the items to slide into or out of view, a class is added to each item, depending on whether the user has clicked the “next” or “previous” button. My initial assumption was that I could simply reverse the animation-direction for items sliding out in the opposite direction, like this:

.my-element--reversed {
  animation: slide 3s cubic-bezier(0.45, 0.25, 0.60, 0.95) reverse;
}

There’s just one problem: reversing the animation also reversed the easing curve! So, now my animation looks great in one direction, but is completely off in the other direction. Oh no!

In this demo, the first box shows the initial animation (an item sliding left-to-right) and the second box shows what happens when the animation-direction is reversed.

See the Pen Reverse animation by Michelle Barker (@michellebarker) on CodePen.

You can see the two animations don’t have the same feel at all. The first box speeds up early on and slows down gently as it progresses, while the second box starts off quite sluggish, then gains a burst of speed before abruptly slowing down. This wouldn’t feel right at all for a carousel.

We have a choice between two options to achieve this:

1. We could create a new keyframe animation to animate the items out, and then apply the same easing as before. That’s not too hard in this example, but what if we have a more complex animation? It would take quite a bit more work to create the same animation in reverse, and we could easily make a mistake.
2. We could use the same keyframe animation (with the animation-direction: reverse) and invert the easing curve so we get the same easing in both directions. This isn’t too hard to do, either.

To reverse the easing curve for our reversed animation we need to rotate the curve 180 degrees on its axis and find the new coordinates.

We can do this with some simple maths — by switching the coordinate pairs and subtracting each value from 1.

To visualize this, imagine that our original values are:

x1, y1, x2, y2

Our reversed values will be:

(1 - x2), (1 - y2), (1 - x1), (1 - y1)

In this demo, the third box shows what we want to happen: the item sliding in the opposite direction, but with the easing reversed to give it the same feel.

See the Pen CSS Variables to reverse easing by Michelle Barker (@michellebarker) on CodePen.

Let’s walk through how we can calculate the reversed easing curve.

Calculating the new curve with CSS variables

We can use CSS variables to calculate the new curve for us! Lets assign each value to a variable:

:root {
  --x1: 0.45;
  --y1: 0.25;
  --x2: 0.6;
  --y2: 0.95;
  
  --originalCurve: cubic-bezier(var(--x1), var(--y1), var(--x2), var(--y2));
}

Then we can use those variables to calculate the new values:

:root {
  --reversedCurve: cubic-bezier(calc(1 - var(--x2)), calc(1 - var(--y2)), calc(1 - var(--x1)), calc(1 - var(--y1)));
}

Now, if we make any changes to the first set of variables, the reversed curve will be calculated automatically. To make this a bit easier to scan when examining and debugging our code, I like to break these new values out into their own variables:

:root {
  /* Original values */
  --x1: 0.45;
  --y1: 0.25;
  --x2: 0.6;
  --y2: 0.95;
  
  --originalCurve: cubic-bezier(var(--x1), var(--y1), var(--x2), var(--y2));
  
  /* Reversed values */
  --x1-r: calc(1 - var(--x2));
  --y1-r: calc(1 - var(--y2));
  --x2-r: calc(1 - var(--x1));
  --y2-r: calc(1 - var(--y1));
  
  --reversedCurve: cubic-bezier(var(--x1-r), var(--y1-r), var(--x2-r), var(--y2-r));
}

Now all that remains is to apply the new curve to our reversed animation:

.my-element--reversed {
  animation: slide 3s var(--reversedCurve) reverse;
}

To help visualize this, I’ve built a little tool to calculate the reversed values of a cubic-bezier. Enter the original coordinate values to get the reversed curve:

See the Pen Reverse cubic-bezier by Michelle Barker (@michellebarker) on CodePen.

The post Reversing an Easing Curve appeared first on CSS-Tricks.