Ember-countup

A countUp.js integration for Ember

Installation

ember install ember-countup

Usage

Basic example

{{count-up startVal=0 endVal=42 duration=2}}

Full example, showing default values

{{count-up
    startVal=0
    endVal=42
    duration=2
    decimals=0
    useEasing=false
    useGrouping=false
    separator=','
    decimal='.'
    prefix=''
    suffix=''}}

Example using formattingFn

{{count-up
    startVal=0
    endVal=42
    duration=2
    formattingFn=customFormatting}}

customFormatting: function(nStr) {
  // I get called on every count up step
}

Example using easingFn

{{count-up
    startVal=0
    endVal=42
    duration=2
    easingFn=customEasing}}

customEasing: function(t, b, c, d) {
    var ts = (t /= d) * t;
    var tc = ts * t;
    return b + c * (1.77635683940025e-15 * tc * ts + 0.999999999999998 * tc + -3 * ts + 3 * t);
}

Example using the onComplete callback

{{count-up
    startVal=0
    endVal=42
    duration=2
    onComplete=(action 'showMessage')}}

actions: {
  showMessage() {
    alert('count up done');
  }
}

Check out the dummy app for a working example.

Styling

Style a span with the class .ember-countup:

<span id="ember389" class="ember-view ember-countup">42</span>