@thednp/bezier-easing
v1.0.9
Published
🍬 A Typescript based cubic-bezier easing functions factory for KUTE.js based on UnitBezier
Downloads
5,067
Maintainers
Readme
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
ornpm update
, takes a few minutes to download the Electron browser; - run
npm run test-ui
to open the test in UI mode ORnpm run test
to run the tests in headless mode.
License
MIT License