Как запускать отсчет счетчиков в тот момент когда попадает в поле зрения пользователя?

Question

[LastGeneral]

Не выходит сделать так что бы счетчик начинал отчет от того момента как доскроливается до этого блока. Что делаю не так?

<div class="counter">
          <span class="counter-anim scrollReveal animated">3200</span> 
          +
      </div>

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();

const animationDuration = 4000;

		const frameDuration = 1000 / 60;

		const totalFrames = Math.round(animationDuration / frameDuration);

		const easeOutQuad = (t) => t * (2 - t);

		const animateCountUp = (el) => {
			let frame = 0;
			const countTo = parseInt(el.innerHTML, 10);

			const counter = setInterval(() => {
				frame++;

				const progress = easeOutQuad(frame / totalFrames);

				const currentCount = Math.round(countTo * progress);

				if (parseInt(el.innerHTML, 10) !== currentCount) {
					el.innerHTML = currentCount;
				}

				if (frame === totalFrames) {
					clearInterval(counter);
				}
			}, frameDuration);
		};

		const countupEls = document.querySelectorAll(".counter > .animated");
		countupEls.forEach(animateCountUp);

Answer 1

[Алексей Ярков]

https://developer.mozilla.org/ru/docs/Web/API/Inte...