Nefesh

Nefesh is a simple library that returns an animated value according to the easing choosen function.

Install

npm install -D nefesh

Usage

import Nefesh from "nefesh";

const nefesh = new Nefesh({

    element: '.element',
    values: {
        x: 100,
        y: {
            from: 300,
            to: 100
        }
    },
    easing: "easeInOutExpo",
    duration: 700,
    begin: function ( element, values ) { ... },
    complete: function ( element, values ) { ... },
    progress: function ( element, values ) { ... }

});

Properties

element

default: null

'.element' indentifier. It will just cross the code, but to animate it you need to make it inside the progress callback.

values

default: { value: { from: 0, to: 1 } }

Values is an Object with the following syntax:

values :{
    value: {
        from: 0,
        to: 1
    }
}

You must send the from to the to value. It will always return the default object named value with an animation from 0 to 1.

You can also send just like this:

values: {
    value: 100
}

Nefesh will presume that it's the to value.

Or you can just send

values: 100

It will be the to value.

If you want to animate different, send multiples objects inside values:

values: {
    x: 200,
    y: {
        from: 450,
        to: 20
    }
}

ATENTION

Nefesh only calculates number values, colors are not supported.

easing

default 'easeInOutExpo'

Easing function to animate the values.

'linear', 'bounce',

'easeInCubic', 'easeOutCubic', 'easeInOutCubic',

'easeInExpo', 'easeOutExpo', 'easeInOutExpo',

'easeInElastic', 'easeOutElastic',

'easeInBack', 'easeOutBack', 'easeInOutBack',

duration

default: 700

Duration must be set in miliseconds.

begin

default: null

This function is called when the animation is about to start.

begin: function ( element, values ) { ... },

progress

default: null

This function is called in every step of the animation. Here is where you should animate your elements according to the values object.

progress: function ( element, values ) { ... }

complete

default: null

This function is called when the animation ends.

complete: function ( element, values ) { ... },