Package Exports

Unit-Bezier

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (Unit-Bezier) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Unit-Bezier

A Combination of Mozilla and Chromium implementations of Bezier Curves used for animation interpolation for Javascript

Unit-Bezier takes optimizations from both Mozilla and Chromium timing function code and combines them into performant Javascript. It is compliant with both browsers' tests.

Getting Started

Download / Clone

Install with npm:

npm install Unit-Bezier

Clone the repo using Git:

git clone --bare https://github.com/jacobcpeters/Unit-Bezier.git

Alternatively you can download this repository.

Using Unit-Bezier

Use the 'new' operator to construct a new UnitBezier object for your function/module/class. The first parameter of the constructor is an array that contains the control points for the Bezier Curve [x1, y1, x2, y2]. The second parameter is the epsilon that controls the desired accuracy of the estimations.

var bezier = new UnitBezier(controlPoints, epsilon);

Easing Aliases

Easy to use aliases are available for common easing types in the UnitBezier.easings object.

var bezier = new UnitBezier(UnitBezier.easings.easeInOut, 0.005);

Table of available aliases:

Easing Name	Control Points
linear	[0.0, 0.0, 1.0, 1.0]
ease	[0.25, 0.1, 0.25, 1.0]
easeIn	[0.42, 0.0, 1.0, 1.0]
easeInOut	[0.42, 0.0, 0.58, 1.0]
easeOut	[0.0, 0.0, 0.58, 1.0]
easeInBack	[0.6, -0.28, 0.735, 0.045]
easeOutBack	[0.175, 0.885, 0.32, 1.275]
easeInOutBack	[0.680, -0.550, 0.265, 1.550]

####Code example:

var bezier = new UnitBezier([0.0, 0.0, 1.0, 1.0], 0.000001), //linear Bezier Curve
    target = document.getElementById('animated-opacity'),
    animationLength = 1000, // 1000ms = 1s
    startTime = Date.now();
    
function animateOpacity() {
    var timeSinceAnimationStarted = Date.now() - startTime;
    
    target.style.opacity = 1 * bezier.calc(timeSinceAnimationStarted / animationLength);
    
    if(timeSinceAnimationStarted < animationLength) {
        requestAnimationFrame(animateOpacity);
    }
}

requestAnimationFrame(animateOpacity);

Feature requests

If Unit-Bezier doesn't support a feature you require, please put a request in the issues tracker.

Unit-Bezier

Package Exports

Readme

Unit-Bezier

Getting Started

Download / Clone

Using Unit-Bezier

Easing Aliases

Table of available aliases:

Feature requests

License