このページは Cloud Translation API によって翻訳されました。

スクロールドリブンアニメーションの事例紹介

Swetha Gopalakrishnan

Saurabh Rajpal

スクロールドリブンアニメーションは、ウェブで一般的な UX パターンです。スクロールドリブンアニメーションは、スクロールコンテナのスクロール位置にリンクされます。つまり、上下にスクロールすると、リンクされたアニメーションが直接応答して前方または後方にスクラブされます。たとえば、視差効果のある背景画像や、スクロールに応じて移動する読み上げインジケーターなどの効果です。

通常、デベロッパーは JavaScript を使用してメインスレッドのスクロールイベントに応答し、スクロールドリブンのアニメーションを作成してきました。スクロールイベントが非同期で配信されるため、スクロールと同期してパフォーマンスの高いスクロールドリブンアニメーションを作成することが難しくなります。また、メインスレッドにあるため、ジャンクが発生することもあります。

ただし、新しいブラウザに導入される CSS と UI の機能の一環として、宣言型のスクロールドリブンアニメーションを作成できるようになりました。スクロールタイムラインとビュータイムラインは、既存の Web Animations API（WAAPI）と CSS Animations API と統合された新しいコンセプトです。これにより、数行のコードのみで、メインスレッドからスムーズなスクロールドリブンのアニメーションを実行できるようになりました。このケーススタディでは、Tokopedia、redBus、Policybazaar がすでにこの新機能からどのようなメリットを得ているかをご覧ください。

対応ブラウザ

ソース

Tokopedia

Tokopedia は、以前のカスタム JavaScript 実装をスクロールドリブンのアニメーションに置き換え、ページのパフォーマンスを最適化し、e コマースコンバージョンファネル全体のブラウジングエクスペリエンスを向上させました。

従来の JavaScript スクロールイベントを使用する場合と比較して、コード行数を最大 80% 削減できました。また、スクロール中の平均 CPU 使用率が 50% から 2% に低下しました。 Andy Wihalim、Tokopedia シニアソフトウェアエンジニア

ユーザーのスクロール位置に基づいて、上部固定バーの表示をアニメーションで変更。

コード

次の実装では、scroll() 関数を使用して匿名スクロール進行状況タイムラインを設定し、CSS アニメーションの進行状況を制御します。上部固定バーの可視性は、定義された animationRange 内のスクロール位置に基づいて変化します。

const toggleBar = keyframes({
  to: { height: 48 },
});

export const cssWrapper = css({
  position: 'fixed',
  left: 0,
  width: '100vw',
  pointerEvents: 'none',
  marginTop: 120,
  height: 0,
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-end',
  animation: `${toggleBar} linear both`,
  animationTimeline: 'scroll()',
  animationRange: '20px 70px',
});

redBus

redBus のおすすめスポットのランディングページでは、コンバージョンファネルの初期段階ですべてのユーザーに表示されるアニメーションが、モバイルとパソコンで異なります。スクロールドリブンのアニメーションにより、これらのカスタム JavaScript 実装を CSS に置き換えて、同じ効果を実現できました。

ユースケース

画像の表示（モバイル用）とカバーフロー（パソコン用）を使用したフォトギャラリー。

redBus の「おすすめスポット」フォトギャラリーで画像を読み込むための、スクロールドリブンのアニメーション画像表示効果。

コード（モバイル）

上の例では、Tokopedia は匿名のスクロール進行状況タイムラインを使用しています。次のコードでは、redBus は名前付きビュー進行状況タイムラインを使用しています。このアニメーションは、要素の最も近い祖先スクロール（この場合はフォトギャラリースクロール）内の定義済みの animation-range 内の <img> 要素の opacity と clip-path を変更します。

const reveal = keyframes`
   from {
       opacity: 0;
       clip-path: inset(45% 20% 45% 20%);
   }
   to {
       opacity: 1;
       clip-path: inset(0% 0% 0% 0%);
   }`

const CardImage = styled.div`
   width: 100%;
   height: 100%;
   img {
       border-top-left-radius: 0.75rem;
       border-top-right-radius: 0.75rem;
       height: 100%;
       width: 100%;
       object-fit: cover;
       view-timeline-name: --revealing-image;
       view-timeline-axis: block;
  
       /* Attach animation, linked to the  View Timeline */
       animation: linear ${reveal} both;
       animation-timeline: --revealing-image;
  
       /* Tweak range when effect should run*/
       animation-range: entry 25% cover 50%;
   }
`;

この機能は、パフォーマンスとエクスペリエンスの向上を完璧に組み合わせており、SEO のページエクスペリエンスシグナルを強化できるため、非常に喜ばしく思います。さらに、学習コストがほとんどないため、すべての e コマースウェブサイトに必須の機能です。また、SDA を活用してユーザージャーニーを増やすという点について、他のチームからも好意的なフィードバックとサポートを受けました。 Amit Kumar、redBus シニアエンジニアリングマネージャー

Policybazaar

保険プランの比較は、ユーザーが意思決定プロセスを導くために繰り返す重要なアクションです。Policybazaar は、スクロールドリブンのアニメーションを使用して、ユーザーが表をスクロールしたときに優先度の低い要素のサイズを縮小しました。これにより、読みやすさが向上し、スムーズなスクロールエクスペリエンスが実現しました。

スクロールドリブンのアニメーションにより、ユーザーがプランを比較できるようにビューポートのスペースを最大化し、読みやすく整理されたエクスペリエンスを実現できました。Rishabh Mehrotra、PolicyBazaar の生命保険 BU デザイン担当ヘッド

投資と生命保険の LOB（事業部門）のプラン比較表のスクロールドリブンアニメーション animate-timeline。

コード

Tokopedia の前の例と同様に、Policybazaar では scroll() 関数を使用して、CSS アニメーションの進行状況を制御するための匿名のスクロール進行状況タイムラインを設定しています。この場合、定義された animation-range 内のスクロール位置に基づいて、フォントサイズを縮小し、ヘッダーをフェード表示します。

@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}

@keyframes move-and-fade-header {
  to {
    translate: 0% -5%;
    top:103px;
}
}

@keyframes shrink-name {
  to {
    font-size: 1.5rem;
  }
}

ユーザージャーニー全体に共通するパターンとしてのスクロールドリブンアニメーション

取り上げられた e コマース企業はすべて、カードがあるページでスクロールドリブンのアニメーションを使用して、カードをアニメーション化してユーザーの注意を引いています。次の例は、ユーザージャーニーのさまざまな部分でカードに適用されるスクロールエフェクトを示しています。通常、これは匿名ビューの進行状況タイムラインを使用して、カスタム CSS アニメーションの進行状況を制御することで実現します。次の CSS スニペットに示すようにします。

@keyframes animate-in {
 0% { opacity: 0; transform: translateY(10%); }
 100% { opacity: 1; transform: translateY(0); }
}

@keyframes animate-out {
 0% { opacity: 1; transform: translateY(0); }
 100% { opacity: 0; transform: translateY(-10%); }
}

.flyin_animate {
   animation: animate-in linear forwards;
   animation-timeline: view();
   animation-range: entry;
}

redBus（ホームページ）

redBus の「おすすめスポット」ランディングページで商品カードを読み込むための、スクロールドリブンのアニメーションフライイン効果。

Policybazaar（商品リスティングページ）

投資とライフ LOB（事業部門）で、スクロールドリブンのアニメーションによるプロダクトカードのフェードインとフェードアウト。

Tokopedia（商品の詳細ページ）

リスト内の商品をスクロールする際のフェードインアニメーションとフェードアウトアニメーション。

Scroll-driven Animations API を使用する際の考慮事項

サポートしていないブラウザでは、スクロールタイムラインポリフィルなどを使用して、スクロールドリブンアニメーションをポリフィルできます。ポリフィルを使用する場合は、フレームワークと連携して適切に動作し、ポリフィルを使用するブラウザでアニメーションが失敗したり、ジャンクが発生したりしないように、追加のテストが必要になります。

CSS では、スクロールドリブンアニメーションを使用する前に、@supports を使用してアニメーションタイムラインのサポートをテストできます。次に例を示します。

@supports (animation-timeline: scroll()) {

}

リソース

スクロールドリブンアニメーションのデモ
スクロールドリブンアニメーションでスクロール時に要素をアニメーション化する
Codelab: CSS でスクロールドリブンアニメーションを使ってみる
Chrome 拡張機能: スクロール駆動アニメーションデバッガ
スクロールタイムラインのポリフィル
バグの報告ですか、新しい機能のリクエストですか？皆様のご意見をお聞かせください。

このシリーズの他の記事を参照して、ビュー遷移、ポップオーバー、コンテナクエリ、has() セレクタなどの新しい CSS と UI の機能を使用して e コマース企業がどのようにメリットを得たかをご覧ください。