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

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 に置き換えて、同じ効果を得ることができました。

ユースケース

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

コード（モバイル）

上の例では、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 デザイン担当ヘッド

コード

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（ホームページ）

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

Tokopedia（商品の詳細ページ）

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

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

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

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

リソース

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

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

• ウェブ UI 機能が e コマース サイトにとって重要な理由
• 移行の事例紹介を見る
• ポップオーバー API のケーススタディ
• コンテナクエリの事例
• :has() セレクタのケーススタディ