Easeer.js

JavaScript module with easing generators and basic animate and throttle functions.

Installation

npm i easeer-js

Usage

Easeer.js offers two different approaches: Work with javascript generators to get easing curves, or work with javascript functions to perform animations.

Easing

const { easeInOut, inteval } = require("easeer-js");

const easing = easeInOut([0, 1000], 100);
let next = easing.next();
while (next.done !== true) {
    console.log(next.value);
    next = easing.next();
}

Animation

var total = 100;
throttle(function (progress) {
    console.log("Loading: " + progress * total + "%");
}, {
    interval: 50,
    duration: 1000,
    easing: "in"
});

Functions

easeInOut(domain, steps) ⇒ object

Perform an ease-in-out curve from min to max evaluated in n steps.

Kind: global function
Returns: object - easing

| Param | Type | Description | | --- | --- | --- | | domain | Array | An array with tow values, min and max of the easing domain | | steps | number | How many steps has to return the easing between min and max |

easeOut(domain, steps) ⇒ object

Perform an ease-out curve from min to max evaluated in n steps.

Kind: global function
Returns: object - easing

| Param | Type | Description | | --- | --- | --- | | domain | Array | An array with tow values, min and max of the easing domain | | steps | number | How many steps has to return the easing between min and max |

easeIn(domain, steps) ⇒ object

Perform an ease-in curve from min to max evaluated in n steps.

Kind: global function
Returns: object - easing

| Param | Type | Description | | --- | --- | --- | | domain | Array | An array with tow values, min and max of the easing domain | | steps | number | How many steps has to return the easing between min and max |

throttle(fn, settings) ⇒ function

Perform an easeing based animation throghout a duration time updated in a deterimed interval

Kind: global function
Returns: function - close - A function to stop the animation before it reaches the end

| Param | Type | Description | | --- | --- | --- | | fn | function | The callback function to be triggered on eacn interval | | settings | object | A configuration object with values for 'interval', 'duration' and 'easing'. The 'interval' value is for the time interval in milliseconds and have 10ms as default value, 'duration' defines the animation time duration and has 1000ms as default value, and 'easing' is to choose what type of easing the animations has to follow and has 'in-out' as default value. |

animation(callback, settings) ⇒ function

Perform an easing based animation with N frames

Kind: global function
Returns: function - close - A function to stop the animation before it reached the end

| Param | Type | Description | | --- | --- | --- | | callback | function | The callback function to be triggered on each frame | | settings | object | A configuration object with values fro 'frames' and 'easing'. The 'frames' defines how much long will be the animation, the 'easing' is to choose what type of easing the animation has to follow. |