Make numbers animate when user scrolls and reach a div

Question

I have a simple jQuery code that works perfectly (and I would like to keep). The problem is that this animation is in a section below on page and it starts running when the page loads. I need this animation (numbers start at 0 and run until the number I put in the divs) to happen only when the user scroll and reaches that div. I searched on google and here on StackOverflow but the solutions that I found didn't work or required a plugin (which I don't wanna use).

Here's the Demo code that I have until the moment: https://jsfiddle.net/aj7Lk2bw/2/

the jQuery is:

    $('.value').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

Solution 1

See if this is what you want: https://jsfiddle.net/aj7Lk2bw/19/

$(window).scroll(testScroll);
var viewed = false;

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

function testScroll() {
  if (isScrolledIntoView($(".numbers")) && !viewed) {
      viewed = true;
      $('.value').each(function () {
      $(this).prop('Counter',0).animate({
          Counter: $(this).text()
      }, {
          duration: 4000,
          easing: 'swing',
          step: function (now) {
              $(this).text(Math.ceil(now));
          }
      });
    });
  }
}

Found the way to do it here: Run script when div is visible in browser window

Solution 2

This is a possible solution:

var section = document.querySelector('.numbers');
var hasEntered = false;

window.addEventListener('scroll', (e) => {
    var shouldAnimate = (window.scrollY + window.innerHeight) >= section.offsetTop;

    if (shouldAnimate && !hasEntered) {
    hasEntered = true;

    $('.value').each(function () {
        $(this).prop('Counter',0).animate({
        Counter: $(this).text()
        }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
        });
    });

  }
});

the variable section is your blue section with the numbers, hasEntered is to not repeat the animation.

If the window scroll is higher than the section position, than it will animate!

Fiddle: https://jsfiddle.net/aj7Lk2bw/18/

Comments

[u_mulder]

I suppose you need onscroll event and check some positions. If your elements appear in window - you can fire countdown.

[u_mulder]

A question to look stackoverflow.com/questions/3045852/…

[Jorge]

Hi ! this is almost the perfect one. The only problem is that the numbers after counting up, they start to count backward to 1 hehe. I need the numbers to start counting from 0 until the desired value and stop at this value.

[Jorge]

Hi Ze Claudio! Your solution works perfectly, thank you really much and sorry the delay to answer you back.