Animate number in viewport - with Comma's

Question

I've created a bit of code that animates to the desired value, (with comma's) ans is working correctly. What I can't work out is how to make the animation start in the viewport. I've looked at other answers, but I can't seem to get it to work. Thoughts or suggestions are greatly appreachiated.

var startDate = new Date('01-01-2021');
var today = new Date();
var diff = Math.floor((today - startDate)/(1000*60*60*24))
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0');
var yyyy = today.getFullYear();
today = mm + '/' + dd + '/' + yyyy;
var answer = diff * 134256;

function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
  val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
return val;
}
document.getElementById("CCalc").innerHTML = 
parseFloat(commaSeparateNumber(answer).replace(/,/g, ''));


$(".fig-number").each(function () {
$(this)
  .prop("Counter", 0)
  .animate(
    {
      Counter: $(this).text()
    },
    {
      duration: 3000,
      easing: "swing",
      step: function (now, tween) {
        // Check added for decimal number
        if(parseInt(tween.end) == parseFloat(tween.end)){
            var number = Math.ceil(now);
          $(this).text(number.toLocaleString());
        }
      },
    }
  );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">. </script>

<p id="CCalc" class="fig-number">39471264</p>

Does this answer your question? [Jquery check if element is visible in viewport](https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport) — Ali Sheikhpour, Dec 01 '21 at 12:40

score 0 · Answer 1 · answered Dec 01 '21 at 12:37

answer is undefined in this line:

document.getElementById("CCalc").innerHTML = 
parseFloat(commaSeparateNumber(answer).replace(/,/g, ''));

Once you account for that, the animation works.

function commaSeparateNumber(val) {
  while (/(\d+)(\d{3})/.test(val.toString())) {
    val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
  }
  return val;
}

// created for reference
const ccalc = document.getElementById("CCalc");
ccalc.innerText = parseFloat(commaSeparateNumber(ccalc.innerText).replace(/,/g, ''));


$(".fig-number").each(function() {
  $(this)
    .prop("Counter", 0)
    .animate({
      Counter: $(this).text()
    }, {
      duration: 3000,
      easing: "swing",
      step: function(now, tween) {
        // Check added for decimal number
        if (parseInt(tween.end) == parseFloat(tween.end)) {
          var number = Math.ceil(now);
          $(this).text(number.toLocaleString());
        }
      },
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="CCalc" class="fig-number">39471264</p>

Hi, the animation worked before I'm just unsure how to trigger it when entering the Viewport. — Anthony Whitefield, Dec 01 '21 at 12:48

score 0 · Answer 2 · answered Dec 01 '21 at 13:38

Worked it out. Here is the working code should anyone require it.

<script type ="text/javascript">
var startDate = new Date('01-01-2021');
var today = new Date();
var diff = Math.floor((today - startDate)/(1000*60*60*24))
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0');
var yyyy = today.getFullYear();
today = mm + '/' + dd + '/' + yyyy;
var answer = diff * 134256;

function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
return val;
}

document.getElementById("CCalc").innerHTML = 
parseFloat(commaSeparateNumber(answer).replace(/,/g, ''));

(function($){
$(function() {
$(function($, win) {
$.fn.inViewport = function(cb) {
return this.each(function(i,el){
  function visPx(){
    var H = $(this).height(),
        r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
    return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));  
  } visPx();
  $(win).on("resize scroll", visPx);
  });
};
}(jQuery, window));
jQuery(function($) {
$(".fig-number").inViewport(function(px) {
if(px>0 && !this.initNumAnim) { 
  this.initNumAnim = true;
  $(this).prop('Counter',0).animate({
    Counter: $(this).text()
  }, {
    duration: 1000,
    step: function (now, tween) {
      if(parseInt(tween.end) == parseFloat(tween.end)){
        var number = Math.ceil(now);
      $(this).text(number.toLocaleString());
    }
    }
  });         
}
});

});
});
})( jQuery );
</script>

Animate number in viewport - with Comma's

2 Answers2