tweening-counter

A counter that uses a timing function to move towards it's destination.

Live Demo

Check out the live demo on CodePen, which uses the stand-alone file.

Installation

Ensure component(1) is installed, then:

$ component install tanem/tweening-counter

Stand-alone

This library may be used stand-alone without the component tool. To build the stand-alone files, ensure UglifyJS2 is installed, then:

$ make standalone

Then add ./tweening-counter.js to your application and reference the TweeningCounter global.

Unit Tests

To run the unit tests, ensure testling is installed. Then:

$ make test

API

new TweeningCounter(el:Element)

Initialize a new TweeningCounter with the given el.

TweeningCounter#to(val:Number)

Set the value to tween to.

tweeningCounter.to(50)

TweeningCounter#ease(fn:String|Function)

Set the easing function.

tweeningCounter.ease('in-out-sine')
tweeningCounter.ease(function(){})

TweeningCounter#duration(ms:Number)

Set the easing duration.

tweeningCounter.duration(1000)

TweeningCounter#onEnd(fn:Function)

Add an end event handler bound to this TweeningCounter.

tweeningCounter.onEnd(function(){})

TweeningCounter#fixed(fixed:Number)

Specify the number of decimal places in the output.

tweeningCounter.fixed(2)

TweeningCounter#start

Start the counter.

tweeningCounter.start()

License

MIT