Почему не работает счетчик и прогресс бар?

Question

[LastGeneral]

Как сделать так что бы счетчик и прогресс бар начинали работу когда попадают в поле видимости пользователя?
Для слежения используется класс scrollReveal, который добавляет класс animated, и должна по идее срабатывать анимация, но ничего не происходит.

<div class="our-work__text">
  <div class="our-work__item">
    <div class="our-work__item__counter">
      <div class="counter scrollReveal" data-cp-percentage="76" data-cp-color="#6759e8"></div>
    </div>
  </div>
  <div class="our-work__item">
    <div class="our-work__item__counter">
      <div class="counter scrollReveal" data-cp-percentage="89" data-cp-color="#f29111"></div>
    </div>
  </div>
  <div class="our-work__item">
    <div class="our-work__item__counter">
     <div class="counter scrollReveal" data-cp-percentage="75" data-cp-color="#42cd83"></div>
    </div>
  </div>
</div>

.counter {
  display: inline-flex;
  cursor:pointer;
  width:300px;
  height:300px;
  max-width:100%;
  position:relative;
  justify-content:center;
  align-items:center;
  font-size: calc(1em + 1vmin);
  transition: height .2s ease-in-out;
  background: #fff;
  border-radius:50%;
  margin:1em 0;
}
.percentage {
  position:absolute;
  text-align:center;
  top:50%;
  left:0;
  right:0;
  vertical-align:middle;
  transform:translate3d(0,-50%,0);
}
canvas {
  position:absolute;
  top:0;
  left:0;
}

document.addEventListener("DOMContentLoaded", function() {

  var circleProgress = (function(selector) {
    var wrapper = document.querySelectorAll(selector);
    Array.prototype.forEach.call(wrapper, function(wrapper, i) {
      var wrapperWidth,
        wrapperHeight,
        percent,
        innerHTML,
        context,
        lineWidth,
        centerX,
        centerY,
        radius,
        newPercent,
        speed,
        from,
        to,
        duration,
        start,
        strokeStyle,
        text;

      var getValues = function() {
        wrapperWidth = parseInt(window.getComputedStyle(wrapper).width);
        wrapperHeight = wrapperWidth;
        percent = wrapper.getAttribute('data-cp-percentage');
        innerHTML = '<span class="percentage"><strong>' + percent + '</strong> %</span><canvas class="circleProgressCanvas" width="' + (wrapperWidth * 2) + '" height="' + wrapperHeight * 2 + '"></canvas>';
        wrapper.innerHTML = innerHTML;
        text = wrapper.querySelector(".percentage");
        canvas = wrapper.querySelector(".circleProgressCanvas");
        wrapper.style.height = canvas.style.width = canvas.style.height = wrapperWidth + "px";
        context = canvas.getContext('2d');
        centerX = canvas.width / 2;
        centerY = canvas.height / 2;
        newPercent = 0;
        speed = 1;
        from = 0;
        to = percent;
        duration = 1000;
        lineWidth = 25;
        radius = canvas.width / 2 - lineWidth;
        strokeStyle = wrapper.getAttribute('data-cp-color');
        start = new Date().getTime();
      };

      function animate() {
        requestAnimationFrame(animate);
        var time = new Date().getTime() - start;
        if (time <= duration) {
          var x = easeInOutQuart(time, from, to - from, duration);
          newPercent = x;
          text.innerHTML = Math.round(newPercent) + " %";
          drawArc();
        }
      }

      function drawArc() {
        var circleStart = 1.5 * Math.PI;
        var circleEnd = circleStart + (newPercent / 50) * Math.PI;
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.arc(centerX, centerY, radius, circleStart, 4 * Math.PI, false);
        context.lineWidth = lineWidth;
        context.strokeStyle = "#ddd";
        context.stroke();
        context.beginPath();
        context.arc(centerX, centerY, radius, circleStart, circleEnd, false);
        context.lineWidth = lineWidth;
        context.strokeStyle = strokeStyle;
        context.stroke();

      }
      var update = function() {
        getValues();
        animate();
      }
      update();


      wrapper.addEventListener("click", function() {
        update();
      });

      var resizeTimer;
      window.addEventListener("resize", function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
          clearTimeout(resizeTimer);
          start = new Date().getTime();
          update();
        }, 250);
      });
    });
    function easeInOutQuart(t, b, c, d) {
      if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
      return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
    }

  });

  circleProgress('.counter.animated');

  function getRandom(min, max) {
    return Math.random() * (max - min) + min;
  }
});

function scrollReveal() {
			var revealPoint = 150;
			var revealElement = document.querySelectorAll(".scrollReveal");
			for (var i = 0; i < revealElement.length; i++) {
				var windowHeight = window.innerHeight;
				var revealTop = revealElement[i].getBoundingClientRect().top;
				if (revealTop < windowHeight - revealPoint) {
					revealElement[i].classList.add("animated");
				}
			}
		}

		window.addEventListener("scroll", scrollReveal);
		scrollReveal();

Comments

[Максим]

я могу на svg написать тебе если хочешь - там не сложно

[LastGeneral]

Максим Ленский, было бы супер

[LastGeneral]

Максим Ленский, А то пол дня с этим уже вожусь, все что то не то и работает как то не так или вообще не работает

[Максим]

LastGeneral,