I've included an implementation for a Cubic Bezier Graphing Equation below. To replicate the graph, I drew from the following sources: Maxime Heckel's Blog and Freya Holmer's Video, which got me interested in the topic in the first place.

JAVASCRIPT

At first I simply took a y(t) to get the eased value, but as I played around with the tool I quickly realized that the result only accounted for the y values of the given control points.

To remedy this, wrote a function that find the y value for a given x by graphing the function at a given resolution and finding the average y between the two points a given x falls between.

JAVASCRIPT

This solution probably is not the ideal solution. But while I do more digging into the math behind finding a the y for a given x value, this is what I'm using for now.

Cubic Bezier Easing

P1 (0.625, 1.458)

P2 (1.458, 0.625)


Linear

Bezier Curve

Fly

scale

slide

fade

* This bezier tool is half educational, half for my own use. The function above operates the animations to the above.