bezier-easing

Bezier Curve based easing functions for Javascript animations

npm install bezier-easing
12 downloads in the last week
20 downloads in the last month

bezier-easing Build Status

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

npm install bezier-easing

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

See this schema from the CSS spec:

TimingFunction.png

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:

See it for real here.

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));
    }
  }());
}

Predefined BezierEasing functions

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

Build Status

npm test

Who use it?

More informations

Implementation based on this article.

npm loves you