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

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
// x outside [0.0,1.0] is clamped
console.log(easing(1.5)); // 1.0

(this schema is from the CSS spec)

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

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

MIT License.

npm test

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

bezier-easing, or a port of it, is embedded in many projects. Here are some of them:

Animation

• React Native (Easing.bezier)
• React Native Web
• React Native Reanimated
• Motion (Framer Motion, modified version)
• Popmotion
• lottie-web
• Velocity.js
• Animated
• AntV G
• Galacean Effects
• karas
• ipo

UI and visualization

• Cytoscape.js
• NG-ZORRO (Ant Design color palette)
• Leva
• React Figma
• React Desktop
• Arco Design Mobile
• ngx-scrollbar
• space.js

Ports to other languages

• fframes (Rust)
• keyframe (Rust)
• ReactUnity (C#)
• Doodle (Kotlin)
• eepp (C++)
• QWidget-FancyUI (C++/Qt)
• Ceramic (Haxe)
• Starling (Haxe)

Apps

• Apple® :)
• eHunter
• One Last Image
• InfiniPaint (C++)
• DS4Windows (C#)
• Lyricon (Kotlin)
• petpet (Java)
• Three.cad
• Hack Club Blot
• Webaverse

Using it somewhere? Feel free to open a PR to add your project.

Implementation based on this article.

You need a node installed.

Install the deps:

npm install

The library is in src/index.js.

Ensure any modification 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)