Animate on enter screen

by pphheerroonn

HTML

<button onclick="runAnimations()">Animate</button>
<div class="training-stats">
    <div class="stat">
       <h3><span class="emph-number countup">25</span><span class="emph-number">+</span><br />
        hours<br />of content</h3>
    </div>
     <div class="stat">
       <h3><span class="emph-number countup">400</span><span class="emph-number">+</span><br />
        individual<br />videos</h3>
     </div>
     <div class="stat">
       <h3><span class="emph-number countup">30</span><span class="emph-number">+</span><br />
        courses</h3>
     </div>
     <div class="stat">
        <h3><span class="emph-number countup">25</span><span class="emph-number">+</span><br />
            hours of new content 
            annually</h3>
      </div>
</div>

CSS

.training-stats{
  margin-top: 1000px;
}

JavaScript

document.getElementById("main-intro").className = "animate-out"

var observer = new IntersectionObserver(function(entries) {
	// isIntersecting is true when element and viewport are overlapping
	// isIntersecting is false when element and viewport don't overlap
	if(entries[0].isIntersecting === true)
  animateIntro();
  else{document.getElementById("main-intro").className = "animate-out"}
		
}, { threshold: [0] });

observer.observe(document.querySelector(".intro"));


const animateIntro = () => {
   document.getElementById("main-intro").className = "animate-in"
	console.log('Element has just become visible in screen');
};