Kinet
Animate stuff with kinetic force. Kinet let's you animate values and use them wherever you need to.
Installation
Include Kinet with scripts tag
or with npm and import
npm install kinet --save
// import needed modules from npm;
Options
Kinet accepts several options defined as follows.
var options = option: "value" var 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 { return Math > 01;}
Methods
var kinet = name: "x" "y";
set
Sets value of current and target of animated instance to required value without animating.
var kinet = ;kinet; // sets to number 10
animate
Animates value of current variable of animated instance to target value without animating.
var kinet = ;kinet; // 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.
// initvar kinet = ; // set handlerkinet;
off
Removes handler.
kinet; // removes single handlerkinet; // removes all handlers for 'tick' eventkinet; // removes all handlers