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
; ;
configuration
You can pass in extra options as a configuration object (➕ required, ➖ optional, ✏️ default).
; ;
➖ 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
; ;
done
📝 triggered at the end of the 'animation'
❗️ never triggered when loop: true
; ;
You can also use the Promise provided on animate-value
; ;
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.