超処理が軽いJavaScriptスクロール判定のCSSアニメーション作成方法

<h1>IntersectionObserverによるスクロール位置取得</h1>
<h2>↓ 1000px以上スクロールして確認してみてください。</h2>
<div class="scrollAnime">scrollAnime1</div>
<hr>
<div class="scrollAnime">scrollAnime2</div>

h2, hr {
  margin-bottom: 1000px;
}
.scrollAnime {
  transition: all 1s linear;
  transform: translateX(-20px);
  opacity: 0;
}
.scrollAnime.active {
  transform: translateX(0);
  opacity: 1;
}

const targets = [].slice.call(document.querySelectorAll('.scrollAnime'))
const targetsLen = targets.length
if (targetsLen) {
  const observer = new IntersectionObserver(changes => {
    for (let i in changes) {
      if (changes[i].isIntersecting) {
        changes[i].target.classList.add('active')
        const activeLen = document.querySelectorAll('.scrollAnime.active').length
        if (targetsLen === activeLen) {
          observer.disconnect()
        }
      }
    }
  })
  targets.forEach(target => observer.observe(target))
}