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

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 + "%";
})

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

@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 の講演をご覧ください。