Getting Started
CubicBezier aims to replicate the CubicBezier timing function found in CSS used with the animation-timing-function property and the transition-timing-function property.
A Cubic Bezier curve is defined by four points P0
, P1
, P2
, and P3
.
P0
and P3
are the start and the end of the curve and, in CSS these
points are fixed as the coordinates are ratios. P0
is (0
, 0
) and
represents the initial time and the initial state, P3
is (1
, 1
)
and represents the final time and the final state.
Since x
is always between 0
and 1
, and y
is almost always also
between 0
and 1
, it is useful to treat them as percentages.
Where x
is the percentage of time that has elapsed in your
animation / transition, and y
is the percentage your object(s)
should have moved between their start and end positions.
Syntax
You can use atoms to represent common control points, or pass a control point tuple. The examples below are equivelant:
CubicBezier.solve(0.25, :ease_out_quad)
CubicBezier.solve(0.25, {0.250, 0.460, 0.450, 0.940})
This will return a y
position of ~0.45
, given an x
of 0.25
.
Ease-Out-Quad is fast at first, and slow towards the end.