BezierEasing provides Cubic Bezier Curve easing which generalizes easing functions exactly like in CSS Transitions.
npm install bezier-easingbezier-easing 
===
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
-------
``javascript`
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)
> BezierEasing(P1.x, P1.y, P2.x, P2.y)
Install
-------
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),BezierEasing(0.42, 0, 0.58, 1)
with BezierEasing, you can define it using which have the function taking an X and computing the Y interpolated easing value (see schema).
License
-------
MIT License.
Tests
---
`
npm test
See also
===
- https://github.com/gre/bezier-easing-editor/
Who use it?
===
- React Native
- Apple® :)
- Velocity.js
- GLSL.io and Diaporama Maker
- ipo
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)npm run benchmark
- not bring performance regression (compare with – don't rely 100% on its precision but it still helps to notice big gaps)npm run visual`
- Run the visual example: