[Lesson Applied Visual Design: Learn How Bezier Curves Work] According to the explenation the x-axis is time, and the y-axis is the change in animation. Both axis move between 0 to 1. There are 4 points. p0, is the starting point (0,0), and p3 is the ending point (1,1). We are left to decide on p1 and p2 and provide them in this stracture (x1, y1, x2, y2). In the following lesson [Applied Visual Design: Use a Bezier Curve to Move a Graphic] we are given this code for a Cubic Bezier:
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
To me it doesn’t make any sense. p1 is exactly the same point as p0. As if it says to the fucntion, in 0% of the time you’ll have 0% of change in the animation. Am I missing something?
Nope, that’s exactly it. That will give the function an upward slope starting around 58% of the animation.
This website http://cubic-bezier.com/#.14,.56,.86,.57 does an amazing job at explaining the Cubic Bezier function interactively. Simply move the pink and bluish points.
The example give (0.25, 0.25, 0.75, 0.75) is case in which the curve (in this case linear line) goes through both points. Since it was the example, I expected it to be the general role, which is not the case.
4 Likes
@PortableStick Please refer to my last message.
How can I let those responsible of the curriculum to notice my suggestion?
You can make you case at Github in the FCC Issues page.
@carpben Thanks a lot. That animation at http://cubic-bezier.com/#0,0,.56,1 really does help explain.
Those coordinates represents pink and blue dots from the image
get your hands to try http://cubic-bezier.com/
so you will understand how the coordinate works.
in real project, you should simulate it using http://cubic-bezier.com/ after you satisfied with the animation coordinate, copy it to your css.
