bezier-easing

Bezier Curve based easing functions for Javascript animations

bezier-easing

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

MIT License.

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

See this schema from the CSS spec:

In CSS you can define easing with 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 the schema).

Example:

var canvas = document.getElementById("viewport"), ctx = canvas.getContext("2d");
 
animate(moveRectangle, 2000, BezierEasing(0.25, 0.1, 0.0, 1.0));
 
function moveRectangle (p) { // p move from 0 to 1
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "hsl("+Math.round(255*p)+",80%,50%)";
  var w = 50;
  var h = 50 + p * (canvas.height - 50);
  ctx.fillRect((canvas.width-w) * p, (canvas.height-h)*0.5, w, h);
}
 
function animate (render, duration, easing) {
  var start = Date.now();
  (function loop () {
    var p = (Date.now()-start)/duration;
    if (p > 1) {
      render(1);
    }
    else {
      requestAnimationFrame(loop);
      render(easing(p));
    }
  }());
}

We have defined for you all 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)
};

Perfect if you want for instance to make an abstraction on top of CSS and JavaScript animations.

Run tests

npm test

Who use it?

More informations

Implementation based on this article.