@thednp/bezier-easing

CubicBezier

A Typescript sourced cubic-bezier class to create easing functions as used in KUTE.js. The module is based on UnitBezier by Apple, a piece of code found on Codepen.

Install

npm install @thednp/bezier-easing

Usage

import CubicBezier from '@thednp/bezier-easing';

const easeCubicInOut = new CubicBezier(0.645, 0.045, 0.355, 1);

const moveItRight = KUTE.to(
  someTarget,
  { translateX: 150 },
  { easing: easingCubicInOut }
);

Note: if you're using KUTE.js, you don't have to install this module, the above is just an example on what it does and how to use it.

By default, new easing functions get a name with the parameters. EG: cubic-bezier(0.645,0.045,0.335,1)

However, you can set your own unique name like so:

const easeCubicInOut = new CubicBezier(0.645, 0.045, 0.355, 1, 'myCubicOut')

You can use CubicBezier in combination with other libraries like D3, Three.js, Tween.js and GSAP of course.

Run the tests suite (new)

• Download the package from Github;
• unpack/unzip and open the folder with your editor;
• open your terminal and navigate to the root of the unpacked folder;
• run npm install or npm update, takes a few minutes to download the Electron browser;
• run npm run cypress to open the Cypress console OR npm run test to run the tests in headless mode.

License

MIT License