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

Yuriko Hirota

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

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

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

• スクロールは別のスレッドで行われるため、スクロール イベントは非同期的に配信されます。
• メインスレッドのアニメーションはジャンクが発生する可能性があります。

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

このたび、スクロールドリブン アニメーションをサポートする新しい 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);
}

新しい 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 処理の影響は受けず、ユーザーのスクロール操作にも応答できます。

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

次のデモは、CyberAgent で作成したスクロールドリブン アニメーションの応用例です。スクロールすると写真がフェードインします。

新しいスクロールドリブン アニメーション JavaScript API と従来の 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,
    }),
  }
);

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

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

その他のデモとリソース

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

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