JavaScript module with easing generators and basic animate and throttle functions.
npm i easeer-js
Easeer.js offers two different approaches: Work with javascript generators to get easing curves, or work with javascript functions to perform animations.
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();
}
var total = 100;
throttle(function (progress) {
console.log("Loading: " + progress * total + "%");
}, {
interval: 50,
duration: 1000,
easing: "in"
});
-
easeInOut(domain, steps) ⇒
object
-
Perform an ease-in-out curve from min to max evaluated in n steps.
-
easeOut(domain, steps) ⇒
object
-
Perform an ease-out curve from min to max evaluated in n steps.
-
easeIn(domain, steps) ⇒
object
-
Perform an ease-in curve from min to max evaluated in n steps.
-
throttle(fn, settings) ⇒
function
-
Perform an easeing based animation throghout a duration time updated in a deterimed interval
-
animation(callback, settings) ⇒
function
-
Perform an easing based animation with N frames
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 |
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 |
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 |
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. |
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. |