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

Yuriko Hirota
Yuriko Hirota

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

スクロールドリブン アニメーションは、ユーザーのスクロール位置によってトリガーされ、ウェブサイトやウェブ アプリケーションにインタラクティビティと視覚効果をもたらす機能です。これは、ユーザーの関心を引き付け、ウェブサイトの視覚的な訴求力を高める効果的な方法です。

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

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

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

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

対応ブラウザ

  • 115
  • 115
  • x

ソース

この記事では、新しい手法と従来の 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);
}

新しい CSS 機能である animation-timeline は、スクロール範囲内の位置を自動的に進行状況の割合に変換するため、手間のかかる作業がすべて行われます。

ここで興味深い点があります。たとえば、ウェブサイトの両方のバージョンに対して大量の計算を実装した場合、メインスレッドのリソースのほとんどを消費することになります。

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 処理の影響をまったく受けず、ユーザーのスクロール操作に応答できます。

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

メインスレッドの比較。

次のデモは、CyberAgent によって作成されたスクロールドリブン アニメーションの適用例を示しています。スクロールすると写真がフェードインすることがわかります。

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

新しい 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,
    }),
  }
);

これにより、前の CSS デモで示したのと同じ進行状況バーのアニメーションを JavaScript だけで作成できます。基盤となるテクノロジーは CSS バージョンと同じです。この API は、使用するメインスレッド リソースをできるだけ少なくするため、従来の JavaScript アプローチに比べてアニメーションがはるかにスムーズになります。

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

その他のデモとリソース

スクロールドリブン アニメーションのさまざまな実装例については、こちらのデモサイトをご覧ください。このサイトでは、CSS と JavaScript の新しい API を使用したデモを比較できます。

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