Skip to content
This repository has been archived by the owner on Jun 7, 2022. It is now read-only.

geoffreydhuyvetters/animate-value

Repository files navigation

animate-value

πŸƒ animates a numeric value

Node NPM David Gitmoji

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.

About

πŸƒ animates a numeric value

Resources

License

Stars

Watchers

Forks

Packages

No packages published