bezier-easing

BezierEasing provides Cubic Bezier Curve easing which generalizes easing functions exactly like in CSS Transitions.

bezier-easing

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 = BezierEasing(0, 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.log(easing.get(0.0)); // 0.0 
console.log(easing.get(0.5)); // 0.3125 
console.log(easing.get(1.0)); // 1.0 

(this schema is from the CSS spec)

It is the equivalent to CSS Transitions' transition-timing-function.

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 .get function taking an X and computing the Y interpolated easing value (see schema).

bezier-easing also define a mapping from existing CSS transition-timing-function :

BezierEasing.css = {
  "ease":        BezierEasing.ease = BezierEasing(0.25, 0.1, 0.25, 1.0),
  "linear":      BezierEasing.linear = BezierEasing(0.00, 0.0, 1.00, 1.0),
  "ease-in":     BezierEasing.easeIn = BezierEasing(0.42, 0.0, 1.00, 1.0),
  "ease-out":    BezierEasing.easeOut = BezierEasing(0.00, 0.0, 0.58, 1.0),
  "ease-in-out": BezierEasing.easeInOut = BezierEasing(0.42, 0.0, 0.58, 1.0)
};

There is also a toCSS() method that returns the transition-timing-function value string (so the library is agnostic).

MIT License.

npm test

See also

Who use it?

Implementation based on this article.

You need a node installed.

Install the deps:

npm install

The library is in index.js.

Ensure any modication will:

  • keep validating the tests (run npm test)
  • not bring performance regression (compare with npm run benchmark – don't rely 100% on its precision but it still helps to notice big gaps)
  • Run the visual example: npm run visual