How to invert the implementation of a Bezier curve in CSS

First, let’s take a look at a CSS carousel animation effect I wrote before. In order to make the transition of the animation smoother, I did not use the various keywords provided by CSS in the animation-timing-function attribute, but used the cubic-bezier function.

Bessel functions can seem confusing at first, but when used correctly, they can add a nicer feel to the user experience of animations.

While building this carousel, I realized that when I added the visible Bezier function to one page, the hidden Bezier function of the previous page was reversed. I thought it would be worth sharing this post because creating a Bezier curve and reversing it might seem tricky, but it’s actually pretty simple.

Understand the basics of easing

First of all, the word Easing is used to describe the acceleration and deceleration rhythm of element animation on the timeline. We can plot this as a graph where the x-axis is time and the y-axis is the progress of the animation. Linear is a graph with no acceleration or deceleration (always moving at the same speed), which is represented by a straight line on the graph:

Non-linear easing will make the animation more natural and realistic. We can apply various easing properties to transitions and animations in CSS. We can set these values ​​on the transition-timing-function or animation-timing-function properties. There are five keywords that can be set:

• linear – Already introduced above
• ease-in – The animation starts slowly and speeds up as it progresses.
• ease-out – The animation starts quickly and slows down at the end.
• ease-in-out – The animation starts slowly, speeds up in the middle, and slows down at the end.
• ease – The default value, which is the opposite of the ease-in-out animation process.

Understanding cubic-bezier

If none of the keyword values ​​described above are suitable for our animation, we can create a custom curve using the cubic-bezier function. Here is an example:

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

We can abbreviate these properties into one, as follows:

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

You'll notice that the cubic-bezier function has four values. These four values ​​are the two pairs of coordinates needed to draw the curve. What do these coordinates mean? If you've used Illustrator, then the vector points that control the size and direction of a curve will be familiar to you. These are the points we need to draw a curve using the cubic-bezier function.

We don't need to know all the math behind Bezier curves. Because some big guys have created convenient tools for us, such as LeaVerou's cubic-bezier.com, where we can visually create a Bezier curve and copy its coordinate point values. The Bezier curve for my carousel effect was created using this tool, and it looks like this:

Here, we can see the two points we need: cubic-bezier(x1, y1, x2, y2).

Apply easing in both the forward and reverse directions

The above carousel has animation applied in both directions - when the left arrow is clicked, the current item slides out of view to the right while the next item slides in to the left; if the right arrow is clicked, the opposite happens. My initial assumption was that I could simply reverse the animation so that the items slide 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 a problem here: adding reverse to the animation also reverses the easing curve! So, now my animation looks fine in one direction, but wrong in the opposite direction.

In the demonstration below, the first box shows the animation in the positive direction, and the second box shows what happens after the reverse is added.

You can see that the feel of these two animations is completely different. The first box speeds up at the beginning and slowly slows down as the animation progresses, while the second box starts quite slowly and then speeds up before stopping.

We have two ways to solve this problem:

• Create a new keyframe animation to display the animation, and set it to the same easing. This is fine for simple animations, but what if you encounter complex animations? Creating the reverse animation requires more work and is prone to errors.
• We can use the same keyframe animation (and set animation-direction: reverse) and reverse the Bezier curve, thus achieving the same easing effect in both directions. This method is not difficult.

Reversing the Bezier curve corresponds to rotating the entire figure 180 degrees in the coordinate axis:

The reversed point coordinates can be obtained through simple mathematical calculations: swap the two coordinate points and subtract 1 from each value.

For example, the coordinates in the positive direction are: x1, y1, x2, y2

Then, the coordinates in the opposite direction are obtained by the following formula: (1 - x2), (1 - y2), (1 - x1), (1 - y1)

In the demo below, the third box is the effect we want: the element slides in the opposite direction, but it has the same animation curve as the positive direction.

Let's see how to calculate the reverse Bezier curve.

Using CSS custom properties to calculate reverse curves

We can use CSS custom properties to calculate new curves! First 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));
}

We can then use these variables to calculate 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 reverse curve points will be automatically calculated. To make it easier to spot problems when inspecting and debugging my code, I like to assign these new values ​​into their own variables:

:root {
  /* forward original value */
  --x1: 0.45;
  --y1: 0.25;
  --x2: 0.6;
  --y2: 0.95;
  
  --originalCurve: cubic-bezier(var(--x1), var(--y1), var(--x2), var(--y2));
  
  /* Reverse calculation value */
  --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's left is to apply the new curve to the inverse animation:

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

To do this more intuitively and visually, I created a small tool to calculate the inverse value of a Bezier curve. Enter the original coordinate values ​​to automatically get the reverse curve value: Reverse cubic-bezier tool

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.