be

bezier-easing

cubic-bezier implementation for your JavaScript animation easings – MIT License

Showing:

Popularity

Downloads/wk

269K

GitHub Stars

1.4K

Maintenance

Last Commit

5mos ago

Contributors

10

Package

Dependencies

0

Size (min+gzip)

0.6KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial