☄️ inrtia.js
lightweight (3kB not gzipped) inertia based animation library
Demo
https://jonasfolletete.github.io/inrtia/
Examples
Basic Usage
; var inrtia = value : 0 interpolation : 'basic'; inrtia;; { if !inrtiastopped const value = inrtia; divstyleleft = value + 'px' // ... Do stuff with inrtia.value window;}
Object Usage
var inrtia = value : x: 0 y: 0; inrtia;
Array Usage
var inrtia = value : 0 0 0; inrtia;
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 |