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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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

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

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

対応ブラウザ

  • Chrome: 115.
  • Edge: 115。
  • Firefox: フラグの背後。
  • Safari: サポートされていません。

ソース

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()) {

}

リソース

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