animate-value
đ animates a numeric value
Installation
Install via yarn
yarn add animate-value (--dev)
or npm
npm install animate-value (--save-dev)
If you don't use a package manager, you can access animate-value
via unpkg (CDN), download the source, or point your package manager to the url.
animate-value
is compiled as a collection of CommonJS modules & ES2015 modules for bundlers that support the jsnext:main
or module
field in package.json (Rollup, Webpack 2)
The animate-value
package includes precompiled production and development UMD builds in the dist
folder. They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. You can drop a UMD build as a <script>
tag on your page. The UMD builds make animate-value
available as a window.animateValue
global variable.
Usage
setup
import av from 'animate-value';
av({
from: 0,
to: 10,
duration: 2000,
change: value => console.log(value)
});
configuration
You can pass in extra options as a configuration object (â required, â optional, âī¸ default).
import av from 'animate-value';
av({
from: 0,
to: 20,
easing: 'linear',
duration: 1000,
delay: 1000,
loopDelay: 500,
loop: true,
reverse: true
});
â from ( Number ) âī¸ 0
đ start value
â to ( Number ) âī¸ 1
đ end value
â easing ( String ) âī¸ 'easeInQuad'
đ easing function (see below in for more info)
â duration ( Number ) âī¸ 600
đ duration (in ms)
â delay ( Number ) âī¸ 0
đ delay (in ms)
â loop ( Boolean | Number ) âī¸ 1
đ loop the animation, loop: true
creates an inifinite loop
âšī¸ looping with reverse: true
creates a back- and forwards animation
â loopDelay ( Number ) âī¸ 0
đ delay between each loop (back- and forwards in case of rewind: true
)
â rewind ( Boolean ) âī¸ false
đ play the animation backwards when finished
easing
You can choose one of these easing functions (default is easeInOutQuad
)
- linear
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
based on https://gist.github.com/gre/1650294#gistcomment-1806616
all credit to @lindell
events
change
đ triggered on each change of the value, passes the value as parameter
import av from 'animate-value';
av({
from: 0,
to: 20,
duration: 2000,
loop: true
change: value => console.log(value)
});
done
đ triggered at the end of the 'animation'
âī¸ never triggered when loop: true
import av from 'animate-value';
av({
from: 0,
to: 10,
duration: 1500,
done: () => console.log('done')
});
You can also use the Promise provided on animate-value
import av from 'animate-value';
av({
from: 0,
to: 10,
duration: 2000
}).then(() => console.log('done'));
Examples
See example
.
License
The code is available under the MIT license.
Contributing
We are open to contributions, see CONTRIBUTING.md for more info.
Misc
This module was created using generator-module-boilerplate.