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

Yuriko Hirota

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

スクロール連動アニメーションは、ユーザーのスクロール位置をトリガーとして、ウェブサイトやウェブ アプリケーションにインタラクティブ性と視覚的な魅力を加える方法です。これは、ユーザーのエンゲージメントを維持し、ウェブサイトの視覚的な魅力を高める優れた方法です。

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

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

これにより、スクロールと同期したパフォーマンスの高いスクロール駆動アニメーションを作成することが不可能または非常に困難になります。

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

この記事では、新しいアプローチと従来の JavaScript の手法を比較して、新しい API を使用するとスクロール駆動型アニメーションがどれほど簡単でスムーズになるかを示します。

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

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

ドキュメントは scroll イベントが発生するたびに、ユーザーが scrollHeight のどの程度までスクロールしたかを計算して応答します。

document.addEventListener("scroll&q>uot;, () = {
  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 の講演をご覧ください。