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.