How to animate changing numbers by counting (showing intermediate values)

I am building a darts calculator, naturally there is a scoreboard showing the score for each player. When a new dart is input the score decreases. Using bindings a change from 20 to 10 looks like this: 20 → 10. I want this change to be animated like this: 20 → 18 → 16 → 14 → 13 → 12 → 11 → 10.

I would describe it as “count pretty fast from the old value to the new one”. I also have an actual GIF from my app:

My current solution is a custom component[1] that uses Velocity.js and directly manipulates the DOM. I’m interested in ideas for different, better, solutions. One using a custom Liquid Fire transition would be very welcome. I tried to make one but failed miserably.

[1] The count-to component:

import Ember from 'ember';

export default Ember.Component.extend({
  onValueChange: function() {
    var from = this.get('displayValue');
    var to = this.get('value');

    this.set('displayValue', this.get('value'));

    if (!this.$()) {

    if (this.isAnimationRunning) {
      from = parseInt(this.$().html(), 10);

      tween: [to, from]
    }, {
      progress: function(elements, complete, remaining, start, tweenValue) {
        this.$().html(parseInt(tweenValue, 10));
      complete: function() {
        this.isAnimationRunning = false;
      begin: function() {
        this.isAnimationRunning = true;
      duration: 800,
      easing: 'ease-out'

  onDidInsertElement: function() {

  onWillDestroyElement: function() {

Mabye will help?

Unfortunately I don’t think this is a viable solution as a time base for animations.

Why don’t you use a “shadow” display number? Something along the lines of:

var value: null; //destination value

updateDisplayed: function (){
			this.set('displayValue', this.get('displayValue')+1);
		} else {
			this.set('displayValue', this.get('displayValue')-1);

And in your component templete simply use: {{displayedValue}}

This might be entirely possible with streams. In any case, I couldn’t figure complete stream solution out. But this solutions subscribes to the stream and tweens the value without directly accessing the DOM.

In any case, generally when dealing with animations - I actually think direct DOM manipulation is the best for performance. But since the animations here don’t involve hundreds of “steps”, the perf cost is negligible for this example.

Edit: here is the same solution as a helper and a stream JS Bin - Collaborative JavaScript Debugging

Edit 2: you could take it a step further and use them as subexpressions to animate declaratively JS Bin - Collaborative JavaScript Debugging