<div class="container">
  <h1>START</h1>
  <h1 class="_anim-items">FIRE</h1>
</div>

.container h1 {
  margin-bottom: 500px;
}

.active {
  color: red;
}

let observer = new IntersectionObserver((entries, observer) => { 
  entries.forEach(entry => {
    entry.target
      .classList.toggle('active', entry.intersectionRatio==1)
  });
}, {threshold: 1});

let fireElem = document.querySelector('._anim-items');
observer.observe(fireElem);