☄️ inrtia.js

lightweight (3kB not gzipped) inertia based animation library

Demo

https://jonasfolletete.github.io/inrtia/

Examples

Basic Usage

import Inrtia from 'inrtia';

var inrtia = new Inrtia({
    value : 0,
    interpolation : 'basic'
});

inrtia.to(20);
raf();

function raf() {
    if (!inrtia.stopped) {
        const value = inrtia.update();
        div.style.left = value + 'px' 
        // ... Do stuff with inrtia.value
    }
    window.requestAnimationFrame(raf);
}

Object Usage

var inrtia = new Inrtia({
    value : {x: 0, y: 0}
});

inrtia.to({x: 10, y: 20});

Array Usage

var inrtia = new Inrtia({
    value : [0, 0, 0]
});

inrtia.to([10, 20, 30]);

References

Constructor Options

	Type	Default	Description
value (required)	Number|Object|Array		Default value
interpolation	String (basic|bounce|elastic)	basic	Method used for interpolation
friction	Number	10	The rate at which values slow down after being updated.
rigidity	Number	0.1	The rate at which values oscillate after being updated. (not available for basic)
precisionStop	Number	0.001	Minimum delta (value - targetValue) to consider animation complete.
perfectStop	Boolean	false	Define if value jumps to targetValue at the end of the animation

Methods

	Description
.to(targetValue : <number|object|array>)	Update targetValue value and restart inrtia (if stopped)
.update(deltaTime : <number> = false)	Method to update inrtia (to use in requestAnimationFrame). If deltaTime (milliseconds) is not specified then it's automatically detected. The method also return the current value.
.stop()	Stop inrtia

Properties

	Type	Description
.value	Number|Object|Array	Current value
.targetValue	Number|Object|Array	Target value
.stopped	Boolean	Define if inrtia is stopped