Intersection Observer で画面外のCSSアニメーションを停止してパフォーマンスを改善する

const targets = document.querySelectorAll('.js-intersection');

const io = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 要素が画面内に入った場合
      entry.target.classList.add('is-intersection');
    } else {
      // 要素が画面外に出た場合
      entry.target.classList.remove('is-intersection');
    }
  });
}); // オプションは省略してデフォルト値を使用する。要素がビューポートに少しでも入るか出るかしたときに実行される。

targets.forEach((target) => io.observe(target));

.animation {
 animation: oneturn 10s linear infinite;
 animation-play-state: paused;
}

.animation.is-intersection {
 animation-play-state: running;
}

@keyframes oneturn {
 100% {
  transform: rotate(oneturn);
 }
}

const target = document.querySelector('.js-scroll-target');

const handleScroll = () => {
  // スクロール値に連動した計算処理をしたい場合
  const scrollY = window.pageYOffset;
  target.style.transform = `translateY(${scrollY}px)`;
};

const io = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 要素が画面内に入った場合
      window.addEventListener("scroll", handleScroll);
    } else {
      // 要素が画面外に出た場合
      window.removeEventListener("scroll", handleScroll);
    }
  });
});

io.observe(target);