Repository files navigation

BezierEasing providesCubic 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 projectingthe X coordinate to a Bezier Curve.This micro library uses fast heuristics (involving dichotomic search, newton-raphson, sampling) to focus onperformance andprecision.

It is heavily based on implementations available in Firefox and Chrome (for the CSS transition-timing-function property).

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

(this schema is from the CSS spec)

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

It is the equivalent toCSS Transitions'transition-timing-function.

In the same way you can define in CSScubic-bezier(0.42, 0, 0.58, 1),with BezierEasing, you can define it usingBezierEasing(0.42, 0, 0.58, 1) which have the `` function taking an X and computing the Y interpolated easing value (see schema).

MIT License.

npm test

• https://github.com/gre/bezier-easing-editor/

• React Native
• Apple® :)
• Velocity.js
• GLSL.io andDiaporama Maker
• ipo

Implementation based on thisarticle.

You need anode installed.

Install the deps:

npm install

The library is inindex.js.

Ensure any modication will:

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