So how does curve-bezier works?

I read and re-read the curve-bezier tutorial for the applied visual design, but I can’t understand how it really works. I don’t get how the values affect the elements. Can someone please explain, that was very brief. Thanks.

Ok so in animation they describe the speed or rate-of-change of the thing (balls) you’re moving (animating) with some named presets like linear or ease-in ease-out. Linear is like driving down the highway with the cruise control on. The speed of the car doesn’t change. One of the balls moves at the same speed always.
Ease-in ease-out is like when I drive the car from the driveway into the garage. I release the brakes accelerating a little I drive forward a few feet then I brake slow and easy stopping the car.

Cubic bezier is for you to fine tune the speed or rate-of-change so that the motion looks more natural, since not everything moves the same way. They want to use a graph to show how fast and when the thing, in this case a ball, changes speed. This is like power curves for a car engine or economic growth curves. You’ve seen graphs about something changing over time like stock market trading.

It’s best if you take a piece of graph paper and draw these by hand. They always show the points as a fraction between 0 and 1 which are hard to draw by hand so since they give us 1/4 and 3/4 lets make a graph four squares high and four squares wide. Always starting at (0,0) put a dot at (1,1) and a dot at (3,3) then end at (4,4). Next connect all the dots with a line. The result is a perfectly diagonal (45 degree) line. Exactly the same as the linear keyword. The x-axis is time. the y-axis is the distance traveled. Starting at (0,0) move your pencil over one line to the right and then up one line. That means you travel one unit of distance in one unit of time. Do it again and each time you should end up on the line you drew earlier. Repeat until you get to (4,4) which is the same as (1,1) in our css. In the lessons that follow, they will use more difficult numbers to graph, like 0.69. I recommend that you make a 10 by 10 graph and put the dot for 0.69 barely touching the line for 7. Then connect all the dots and go through each step paying attention to how many distance units are traveled for each time unit.
Here’s a link with a bunch of crazy graphs. Hover over one and see how the speed of the dot changes. The more vertical the line the faster it moves. The more horizontal the line the slower it moves.
https://easings.net/en
If you want something more than the the preset animations then the way to do it is by graphing four points.

7 Likes

Fantastic visual way to explain this I could see it all working in code in my head. Brilliant!

1 Like

Well, that says it all. :astonished:

1 Like

Thank you so much, great explanation and resource.

Thank you all. I was worried about TL;DR

No, I work a lot, and I don’t have much time to be on the computer. Really really thank you.