BezierEasing provides interpolation to make Bezier Curve based easing functions for your JavaScript animations.

var easing = BezierEasing(0, 0, 1, 0.5);
// easing is a function which projects x in [0.0, 1.0] onto the bezier-curve defined by the 4 points (see schema below).
console.log(easing(0.0)); // 0.0
console.log(easing(0.5)); // 0.3125
console.log(easing(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 retuns a function taking an X and computing the Y interpolated easing value (see schema).

• See glsl-transition example.

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

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

MIT License.

npm test

• Apple® :)
• Velocity.js

Implementation based on this article.