https://github.com/thednp/bezier-easing

🍬 A Typescript based cubic-bezier-easing class to create easing functions as used in KUTE.js
https://github.com/thednp/bezier-easing

easing-functions javascript kute typescript

Last synced: 4 months ago
JSON representation

🍬 A Typescript based cubic-bezier-easing class to create easing functions as used in KUTE.js

• Host: GitHub
• URL: https://github.com/thednp/bezier-easing
• Owner: thednp
• License: mit
• Created: 2020-01-16T06:34:29.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2025-05-28T11:42:04.000Z (7 months ago)
• Last Synced: 2025-07-10T06:57:35.350Z (5 months ago)
• Topics: easing-functions, javascript, kute, typescript
• Language: TypeScript
• Homepage:
• Size: 964 KB
• Stars: 8
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
## CubicBezier

[![Coverage Status](https://coveralls.io/repos/github/thednp/bezier-easing/badge.svg)](https://coveralls.io/github/thednp/bezier-easing)

[![ci](https://github.com/thednp/bezier-easing/actions/workflows/ci.yml/badge.svg)](https://github.com/thednp/bezier-easing/actions/workflows/ci.yml)

[![typescript version](https://img.shields.io/badge/typescript-5.8.3-brightgreen)](https://www.typescriptlang.org/)

[![vitest version](https://img.shields.io/badge/vitest-3.1.4-brightgreen)](https://vitest.dev/)

[![vite version](https://img.shields.io/badge/vite-6.3.5-brightgreen)](https://github.com/vitejs)

A Typescript sourced cubic-bezier class to create easing functions as used in [KUTE.js](https://github.com/thednp/kute.js). The module is based on UnitBezier by Apple, a piece of code found on [Codepen](https://codepen.io/jwdunn/pen/VJGzNm).

## Install

```js

npm install @thednp/bezier-easing

```

## Usage

```js

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:

```js

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

```

You can use CubicBezier in combination with other libraries like [D3](https://github.com/d3), [Three.js](https://github.com/mrdoob/three.js), [Tween.js](https://github.com/tweenjs/tween.js) and [GSAP](https://greensock.com/gsap/) of course.

## Run the tests suite (new)

* [Download](https://github.com/thednp/bezier-easing/archive/refs/heads/master.zip) 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 test-ui` to open the test in UI mode OR `npm run test` to run the tests in headless mode.

## License

MIT License