Cacher is the code snippet organizer for pro developers

<div class="container">
  <div class="animation-box">
    <p>Animation Box</p> 
  </div>
  <div class="animation-box">
    <p>Animation Box2</p> 
  </div>
  <div class="animation-box">
    <p>Animation Box3</p> 
  </div>
  <div class="animation-box">
    <p>Animation Box4</p> 
  </div>
    <div class="animation-box">
    <p>Animation Box5</p> 
  </div>
    <div class="animation-box">
    <p>Animation Box6</p> 
  </div>
</div>

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

  const els = document.querySelectorAll('.animation-box');
  const cb = function(entries, observer){
    entries.forEach(entry => {
      if(entry.isIntersecting){
        entry.target.classList.add('inview');
        observer.unobserve(entry.target);
      }else{
      }
    });
  };
  const io = new IntersectionObserver(cb);
  els.forEach(el => io.observe(el));

});

.container{
  display: block;
}
.animation-box{
  padding: 50px;
  margin: 50px;
  background-color: blue;
  opacity: 0;
}
.animation-box p{
  color: white;
}

.inview{
  opacity: 1;
  transition: opacity 1000ms;
}