Kinet

Kind of a most lightweight animation library of all. Kinet lets you animate with that spring effect so you can use the values wherever you need to.

Installation

Include Kinet with scripts tag

<script src="./dist/kinet.min.js"></script>

or with npm and import

npm install kinet --save

// import needed modules from npm
import Kinet from 'kinet';

Options

Kinet accepts several options defined as follows.

var options = { option: "value" }
var kinet = new Kinet(options);

friction

Recommended value 0-1. Default value is 0.3.

acceleration

Recommended value 0-1. Default value is 0.04.

initialValue

Sets the initial value of current and target variables in animated instances.

names

Array of names (strings). Kinet creates animated instance for each name. Defaults to single x value in array.

test

Function testing whether the animation has finished. Function gets and animated instance as an argument. When test function returns false for all animated instances, Kinet stops the animation and sets values to target values.

// default value
test: function (instance) {
    return Math.abs(instance.current - instance.target) > 0.1;
}

Methods

var kinet = new Kinet({name: ["x", "y"]});

set

Sets value of current and target of animated instance to required value without animating.

var kinet = new Kinet();
kinet.set("x", 10); // sets to number 10

animate

Animates value of current variable of animated instance to target value without animating.

var kinet = new Kinet();
kinet.animate("x", 10); // animates to number 10

on

Sets handler for event. Available events are start (called at start of animation), end (called at the end of animation) and tick (called for every tick of animation). Tick is called with requestAnimationFrame as the current value progresses to target value.

// init
var kinet = new Kinet();

// set handler
kinet.on('tick', function () {
    // do something on every animation tick
});

off

Removes handler.

kinet.off('tick', handler); // removes single handler
kinet.off('tick'); // removes all handlers for 'tick' event
kinet.off(); // removes all handlers