BezierEasing provides Cubic Bezier Curve easing which generalizes easing functions exactly like in CSS Transitions.
BezierEasing provides Cubic Bezier Curve easing which generalizes easing functions (ease-in, ease-out, ease-in-out, ...any other custom curve) exactly like in CSS Transitions.
Implementing efficient lookup is not easy because it implies projecting the X coordinate to a Bezier Curve. This micro library uses fast heuristics (involving dichotomic search, newton-raphson, sampling) to focus on performance and precision.
It is heavily based on implementations available in Firefox and Chrome (for the CSS transition-timing-function property).
var easing = BezierEasing0 0 1 0.5;// easing allows to project x in [0.0,1.0] range onto the bezier-curve defined by the 4 points (see schema below).console.logeasing0.0; // 0.0console.logeasing0.5; // 0.3125console.logeasing1.0; // 1.0
(this schema is from the CSS spec)
It is the equivalent to CSS Transitions'
In the same way you can define in CSS
cubic-bezier(0.42, 0, 0.58, 1),
with BezierEasing, you can define it using
BezierEasing(0.42, 0, 0.58, 1) which have the `` function taking an X and computing the Y interpolated easing value (see schema).
Implementation based on this article.
You need a
Install the deps:
The library is in
Ensure any modication will:
npm run benchmark– don't rely 100% on its precision but it still helps to notice big gaps)
npm run visual