Cubic-bezier-editor NPM

Cubic Bezier

Cubic bezier curve editor based on cubic-bezier.com modified to be easily customizable for embeding into other webapps.

Quickstart

HTML

<head>
    <meta charset="utf-8" />
    <title>cubic-bezier</title>
    <link href="https://unpkg.com/cubic-bezier-editor/dist/cubic-bezier-editor.min.css" rel="stylesheet">
    <script src="https://unpkg.com/cubic-bezier-editor"></script>
</head>
<body></body>

JS

const bezierEditor = cubicBezier({
    /* Your options */
});
bezierEditor.init();

CSS

* {
	margin: 0;
}

body {
	background: rgb(46, 42, 42);
	font-family: 'Helvetica Neue', sans-serif;
	line-height: 1.4;
}

Options

Option	Description	Type	Default
`appendTo`	Element or selector to append the editor	`HTMLElement` or `string`	`<body></body>`
`onUpdate`	Callback to run when canvas is updated	`Function`	`() => {}`
`width`	width of the canvas, `height = width * 2`	`number`	`150`
`default`	editor default values	`string`	`.25, .1, .25, 1`
`bezierThickness`	bezier curve thickness	`number`	`.015`
`handleThickness`	handle thickness	`number`	`.01`
`bezierColor`	bezier curve color	`string`	`#aaa4aa`
`handleColor`	handle color	`string`	`rgba(0,255,0,.6)`
`arrowKeys`	allow moving handle with arrow keys	`boolean`	`true`
`onClick`	when canvas is clicked move the closest handle to mouse position	`boolean`	`true`
`predefined`	predefined curves	`object`	`{'ease': '.25,.1,.25,1','linear': '0,0,1,1','ease-in': '.42,0,1,1','ease-out': '0,0,.58,1','ease-in-out': '.42,0,.58,1'}`
`padding`	canvas padding	`array` or `number`	`[.25, 0]`
`bezierLibrary`	bezier library options `width and height apply to each library item`	`object`	`{width:30,height:30,handleColor:'rgba(0,255,0,.6)',bezierColor:'#aaa4aa',handleThickness:.01,bezierThickness:.015}`
`input`	show input	`boolean`	`true`
`preview`	show preview animation	`boolean`	`true`
`duration`	preview animation duration	`number`	`1.5`
`transformPos`	custom callback function for modifying position onupdate	`Function`	`undefined`

Reference

cubicBezier.getValueArrayNum();//[0.25, 0.1, 0.25, 1]
cubicBezier.getValueArray();//[".25", " .1", " .25", " 1"]
cubicBezier.getValueString();//'.42,0,.58,1'
cubicBezier.getValueCss();//'cubic-bezier(.42,0,.58,1)'
cubicBezier.getDuration();//1.5
cubicBezier.checkCoordinates([".25", " .1", " .25", " 1"]);//true

transformPos Callback

By default all position data is obtained by using getBoundingClientRect, the transformPos callback can be used if you want to tweek these positions;

const bezierEditor = cubicBezier({
    transformPos(l, t) {
        // transform
        return { left, top };
    },
});

Download

CDN
- https://unpkg.com/cubic-bezier-editor
NPM
- npm i cubic-bezier-editor
GIT
- git clone https://github.com/Ju99ernaut/cubic-bezier.git

Usage

Browser

<link href="https://unpkg.com/cubic-bezier-editor/dist/cubic-bezier-editor.min.css" rel="stylesheet">
<script src="https://unpkg.com/cubic-bezier-editor"></script>

<script>
    const bezierEditor = cubicBezier({
        /* Your options */
    });
    bezierEditor.init();
</script>

Modern Javascript

import cubicBezier from 'cubic-bezier-editor';
import 'cubic-bezier-editor/dist/cubic-bezier-editor.min.css';

const bezierEditor = cubicBezier({
    /* Your options */
});
bezierEditor.init();

Development

Clone repository

$ git clone https://github.com/Ju99ernaut/cubic-bezier.git
$ cd cubic-bezier

Install dependencies

$ npm i

Start dev server

$ npm start

Build

$ npm run build

License

MIT

cubic-bezier easing editor

@everything-registry/sub-chunk-1424 @infinitebrahmanuniverse/nolb-cub

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago