ease-value
Value easing component which animates single value continuously.
Unlike standard animations EaseValue doesn't have a duration or fixed "to" value and can have "to" value changing frequently, for example on mouse movement.
Install
Install with npm:
$ npm install ease-value --save
Example
; // Create animation with small 'force' value for smoother / slower animationconst mouseX = 'force': 01;const mouseY = 'force': 01; // On mouse movement update 'mouse' animation target valuedocument; // On animation step move demo box. Callback will be called twice per animation frame,// once for mouseX and once for mouseYmouseX;mouseY; { documentstyletransform = `translate(px, px)`;});
To avoid callback being called more than once per animation frame we can use EaseValue.multiple(instances)
and add listener to it instead.
; // Listen to all events const mouse = EaseValuemultiple 'x': 'force': 01 'y': 'force': 01; // On mouse movement update 'mouse' animation target valuedocument; // On animation step move demo boxmouse;
API
EaseValue([options])
Options
Name | Type | Usage | Default |
---|---|---|---|
force |
Number | Amount of force used for animation / animation speed. Smaller the value, slower the animation will be | 0.1 |
precision |
Number | To prevent unneeded step event calls and to allow detecting animation end faster, animation value is rounded to this precision. For example with default precision, value between steps will not change by less than 0.01 |
0.01 |
easing |
String | Easing name, currently there is easeOut and linear easings |
"easeOut" |
value |
Number | Initial value, optional. If initial value is not provided, then it will be set when calling to or reset for first time |
null |
on(eventName, callback)
Adds event listener. To callback is passed current value as first argument.
Event names
Name | Description |
---|---|
start |
Triggered when animation starts or when animation resumes after previously completing / stoping |
stop |
Triggered when animation completes / stops |
step |
Triggered on each animation step after value change, if value didn't changed between steps then 'step' callback won't be called |
off(eventName, callback)
Removes event listener.
to(value)
Set value to which animate to. Calling to
for first time if value
option was not provided is equivalent to calling reset
reset(value)
Set value without using animation, will instantly jump to this value.
destroy()
Removes all listeners, stops animation
Running tests
Install dev dependencies:
$ npm install -d && npm test
License
Copyright © 2017, Kaspars Zuks. Released under the MIT license.