https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve

Hello, i have a little bit confusion here in cubic-bezier function. in the above example, the function is [ animation-timing-function: cubic-bezier(0.69, 0.1, 1, 0.1); ]. my confusion is we should go from x1 to y1 and x2 to y2. So, x2 and y2 should be larger than x1 and y1 . i mean is should be cubic-bezier(0.1, 0.69, 0.1, 1). But it actually seems almost the opposite. Can anyone explain me the topic please.

this is a bezier curve

it first goes up then goes down again

the x1, y1, x2, y2 values set respectively to 0.311, 0.441, 0.444, 1.649.

part is related to what the explained earlier: cubic-bezier(0.3, 0.4, 0.5, 1.6);

which they use for a juggeling movement

As they clearly explain further: Notice that the value of y2 is larger than 1. Although the cubic Bezier curve is mapped on a 1 by 1 coordinate system, and it can only accept x values from 0 to 1, the y value can be set to numbers larger than one.

So yes if it’s just a cubic bezier u would be right however that’s not all the lesson is azbout

1 Like