Skip to content
cubic-bezier implementation for your JavaScript animation easings – MIT License
Branch: master
Clone or download
Latest commit b9f7a8b Jun 6, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example v0.2.1 : supports both requirejs / node require() / standalone Dec 24, 2013
src Even earlier exit for linear case. May 16, 2018
test simpler library: just expose a (a,b,c,d)=>number=>number function Mar 12, 2016
typing-tests Add typings definition Nov 17, 2017
.eslintrc simpler library: just expose a (a,b,c,d)=>number=>number function Mar 12, 2016
.gitignore move index into src and add dist export Mar 14, 2016
.travis.yml 0.2.2: Add type check on invalid arguments + Add tests Dec 25, 2013
LICENSE
README.md Update README.md May 29, 2018
benchmark.js
package.json v2.1.0 Jun 6, 2018
visual-demo.js simpler library: just expose a (a,b,c,d)=>number=>number function Mar 12, 2016
yarn.lock bump dev deps Jun 6, 2018

README.md

bezier-easing Build Status

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).

Usage

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

TimingFunction.png

BezierEasing(P1.x, P1.y, P2.x, P2.y)

Install

npm install bezier-easing

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

License

MIT License.

Tests

Build Status

npm test

See also

Who use it?

More informations

Implementation based on this article.

Contributing

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
You can’t perform that action at this time.