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.

kavsingh/animate-value