Count Animation from Number a to B

Count animation from number A to B

You can just code it yourself pretty simply:

function animateValue(id, start, end, duration) {
    if (start === end) return;
    var range = end - start;
    var current = start;
    var increment = end > start? 1 : -1;
    var stepTime = Math.abs(Math.floor(duration / range));
    var obj = document.getElementById(id);
    var timer = setInterval(function() {
        current += increment;
        obj.innerHTML = current;
        if (current == end) {
            clearInterval(timer);
        }
    }, stepTime);
}

animateValue("value", 100, 25, 5000);

#value {
    font-size: 50px;
}

<div id="value">100</div>

Animated counter when scrolling into viewport - with thousands separator

To get your thousands - comma separated string use Number.prototype.toLocaleString()

console.log( (12345678).toLocaleString('en-US') );

jQuery animated number counter from zero to value

Your thisdoesn't refer to the element in the step callback, instead you want to keep a reference to it at the beginning of your function (wrapped in $thisin my example):

$('.Count').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      $this.text(Math.ceil(this.Counter));
    }
  });
});

Update: If you want to display decimal numbers, then instead of rounding the value with Math.ceil you can round up to 2 decimals for instance with value.toFixed(2):

step: function () {
  $this.text(this.Counter.toFixed(2));
}

How to add a count up animation inside a component?

You could watch your props and have a continuing interval that increment your counter values only when they need to be.

<template>
  <div>{{ firstTeamCounterValue }} - {{ secondTeamCounterValue }}</div>
</template>
 
<script>
export default {
  props: {
    firstTeamCurrentScore: {
      type: Number,
      default: 0,
    },
    secondTeamCurrentScore: {
      type: Number,
      default: 0,
    },
    firstTeamMapScore: {
      type: Number,
      default: 0,
    },
    secondTeamMapScore: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      firstTeamCounterValue: 0,
      secondTeamCounterValue: 0,
      firstValueToReach: 0,
      secondValueToReach: 0,
      countInterval: null,
    };
  },
  mounted() {
    this.firstValueToReach = this.firstTeamCurrentScore;
    this.secondValueToReach = this.secondTeamCurrentScore;
    this.countInterval = setInterval(() => {
      if (this.firstValueToReach > this.firstTeamCounterValue) {
        this.firstTeamCounterValue += 1;
      }
      if (this.secondValueToReach > this.secondTeamCounterValue) {
        this.secondTeamCounterValue += 1;
      }
    }, 50);
  },
  unmounted() {
    clearInterval(this.countInterval);
  },
  watch: {
    firstTeamCurrentScore: function (val) {
      this.firstValueToReach = val;
    },
    secondTeamCurrentScore: function (val) {
      this.secondValueToReach = val;
    },
  },
};
</script>

I want to apply the count animation individually

All you have to do is to include the .each() function. Then it works just fine.

Demo

$(function() {
  $(".numB").each(function() {
    var ln = Number($(this).text());
    var $el = $(this);
    $($el).animate({
      val: ln
    }, {
      duration: 2000,
      step: function() {
        var num = numComma(Math.floor(this.val));
        // $el.text(num); //have Comma
        $el.text(Math.floor(this.val)); //none Comma
      },
      complete: function() {
        var num = numComma(Math.floor(this.val));
        $el.text(Math.floor(this.val));
      }
    });
  });

  function numComma(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="numB">12345</div>
<div class="numB">600</div>

---

Related Topics