このページは 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% に減少しました（Tokopedia、シニアソフトウェアエンジニア Andy Wihalim 氏）

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

コード

次の実装では、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 の ToDo リストのランディングページには、モバイルとパソコン向けに異なるアニメーションが用意されています。このページは、コンバージョンプロセスの初期段階ですべてのユーザーに表示されます。スクロールドリブンのアニメーションにより、これらのカスタム 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 は、スクロールドリブンのアニメーションを使用して、ユーザーが表をスクロールしたときに優先度の低い要素のサイズを縮小しました。これにより、読みやすさが向上し、スムーズなスクロールエクスペリエンスが実現しました。

スクロールドリブンアニメーションにより、ユーザーが各プランを比較できるビューポートのスペースを最大化し、集中して読みやすくしました。- PolicyBazaar、生命保険事業部長、Rishabh Mehrotra 氏

投資と生命保険の 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 コマース企業がどのようにメリットを得たかをご覧ください。