スクロールドリブン アニメーションのパフォーマンスに関する事例紹介

Yuriko Hirota

スクロールドリブン アニメーションの新機能

スクロール駆動アニメーションは、ユーザーのスクロール位置に応じてウェブサイトやウェブ アプリケーションにインタラクティブ性と視覚的な魅力を加える方法です。ユーザーの関心を維持し、ウェブサイトの視覚的な魅力を高めるのに役立ちます。

以前は、スクロールドリブン アニメーションを作成する唯一の方法は、メインスレッドでスクロール イベントに応答することでした。これには 2 つの大きな問題がありました。

• スクロールは別のスレッドで実行されるため、スクロール イベントは非同期で配信されます。
• メインスレッドのアニメーションはジャンクの影響を受けます。

そのため、スクロールと同期したパフォーマンスの高いスクロールドリブン アニメーションを作成することは不可能か、非常に困難でした。

このたび、スクロールドリブン アニメーションをサポートする新しい API セットを導入しました。この API は CSS または JavaScript から使用できます。この API は、メインスレッドのリソースをできるだけ使用しないように設計されているため、スクロールドリブン アニメーションの実装がはるかに簡単になり、アニメーションも大幅にスムーズになります。スクロールドリブン アニメーション API は現在、次のブラウザでサポートされています。

この記事では、新しいアプローチと従来の JavaScript の手法を比較して、新しい API を使用するとスクロールドリブン アニメーションをどれだけ簡単かつスムーズに作成できるかを示します。

スクロールドリブン アニメーション CSS API と従来の JavaScript の比較

次のプログレス バーの例は、クラス JavaScript の手法を使用して作成されています。

scroll イベントが発生するたびにドキュメントが応答し、ユーザーがスクロールした scrollHeight の割合を計算します。

document.addEventListener("scroll", () => {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

次のデモでは、CSS で新しい API を使用して同じプログレス バーを表示しています。

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

新しい animation-timeline CSS 機能は、スクロール範囲内の位置を進行状況の割合に自動的に変換するため、重い処理はすべてこの機能が行います。

ここで興味深いのは、ウェブサイトの両方のバージョンで、メインスレッドのリソースのほとんどを消費する非常に重い計算を実装したとします。

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

予想どおり、従来の JavaScript バージョンは、メインスレッドのリソースの結合によりジャンクが発生し、動作が遅くなります。一方、CSS バージョンは、JavaScript の重い処理の影響をまったく受けず、ユーザーのスクロール操作に応答できます。

次のスクリーンショットに示すように、DevTools での CPU 使用率はまったく異なります。

次のデモは、CyberAgent が作成したスクロールドリブン アニメーションのアプリケーションを示しています。スクロールすると写真がフェードインします。

新しいスクロールドリブン アニメーション JavaScript API と従来の JavaScript の比較

新しい API のメリットは CSS に限定されません。JavaScript を使用して、スムーズなスクロールドリブン アニメーションを作成することもできます。次の例をご覧ください。

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

これにより、JavaScript のみを使用して、前の CSS デモで示したのと同じプログレス バー アニメーションを作成できます。基盤となる技術は CSS バージョンと同じです。この API は、メインスレッドのリソースをできるだけ使用しないように設計されているため、従来の JavaScript アプローチと比較して、アニメーションがはるかにスムーズになります。

また、この新しい API は、既存の Web Animations API（WAAPI） および CSS Animations API と連携して、宣言型のスクロールドリブン アニメーションを有効にします。

その他のデモとリソース

このデモサイトでは、スクロールドリブン アニメーションのさまざまな実装を確認できます。ここでは、CSS と JavaScript からこれらの新しい API を使用したデモを比較できます。

新しいスクロールドリブン アニメーションについて詳しくは、こちらの記事とI/O 2023 のトークをご覧ください。