# bezier-easing

> BezierEasing provides Cubic Bezier Curve easing which generalizes easing functions exactly like in CSS Transitions.

Latest version **3.1.0** (published 2026-09-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install bezier-easing
pnpm add bezier-easing
yarn add bezier-easing
bun add bezier-easing
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2026-09-05 |
| First published | 2013-12-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1775 |
| Author | Gaëtan Renaudeau |
| Maintainers | gre |
| Keywords | cubic-bezier, bezier, easing, interpolation, animation, timing, timing-function |

## Links

- npm: https://www.npmjs.com/package/bezier-easing
- Repository: https://github.com/gre/bezier-easing
- Homepage: https://github.com/gre/bezier-easing#readme
- Issues: https://github.com/gre/bezier-easing/issues
- npm.io page: https://npm.io/package/bezier-easing

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 3.1.0 (latest) — 2026-09-05
- 3.0.1 — 2026-06-20
- 3.0.0 — 2026-03-18
- 2.1.0 — 2018-06-06
- 2.0.3 — 2016-03-14
- 2.0.2 — 2016-03-14
- 2.0.1 — 2016-03-12
- 2.0.0 — 2016-03-12
- 1.1.1 — 2015-08-06
- 1.1.0 — 2015-07-24
- 1.0.0 — 2015-07-03
- 0.4.5 — 2015-04-14
- 0.4.4 — 2014-10-06
- 0.4.3 — 2014-08-09
- 0.4.2 — 2014-07-17
- … 9 more at https://npm.io/package/bezier-easing/versions

## README

# bezier-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)

[![TimingFunction.png](https://www.w3.org/TR/css-easing-1/images/cubic-bezier-easing-curve.svg)](https://www.w3.org/TR/css-easing-1/#cubic-bezier-easing-functions)

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

## Install

[![npm install bezier-easing](https://nodei.co/npm/bezier-easing.png)](https://npmjs.org/package/bezier-easing)

It is the equivalent to [CSS Transitions' `transition-timing-function`](http://www.w3.org/TR/css-easing-1/#cubic-bezier-easing-functions).

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

```
npm test
```

# See also

- [https://github.com/gre/bezier-easing-editor/](https://github.com/gre/bezier-easing-editor/)

# Who use it?

- [React Native](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Animated/bezier.js)
- [Apple®](http://images.apple.com/v/mac-pro/home/b/scripts/overview.js) :)
- [Velocity.js](https://github.com/julianshapiro/velocity)
- [Diaporama Maker](https://github.com/gre/diaporama-maker)
- [ipo](https://github.com/gre/ipo)

## More informations

Implementation based on this [article](http://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/).

## Contributing

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)

---
_Source: https://npm.io/package/bezier-easing · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._