Études de cas sur les animations liées au défilement

Swetha Gopalakrishnan

Saurabh Rajpal

Les animations déclenchées par le défilement sont un modèle d'expérience utilisateur courant sur le Web. Une animation liée au défilement est associée à la position de défilement d'un conteneur de défilement. Autrement dit, lorsque vous faites défiler la page vers le haut ou vers le bas, l'animation associée avance ou revient en arrière en réponse directe. Par exemple, des effets tels que des images de fond en parallaxe ou des indicateurs de lecture qui se déplacent lorsque vous faites défiler la page.

Les développeurs créaient généralement des animations basées sur le défilement à l'aide de JavaScript pour répondre aux événements de défilement sur le thread principal. Il est donc difficile de créer des animations performantes basées sur le défilement qui sont synchronisées avec le défilement, car les événements de défilement sont envoyés de manière asynchrone, ce qui entraîne souvent des à-coups en raison de leur présence sur le thread principal.

Toutefois, dans le cadre des nouvelles fonctionnalités CSS et d'UI disponibles dans les navigateurs, vous pouvez désormais créer des animations déclaratives liées au défilement. Avec les chronologies de défilement et de vue, de nouveaux concepts qui s'intègrent à l'API Web Animations (WAAPI) et à l'API CSS Animations existantes, vous pouvez désormais exécuter des animations fluides basées sur le défilement à partir du thread principal, avec seulement quelques lignes de code. Dans cette étude de cas, découvrez comment Tokopedia, redBus et Policybazaar profitent déjà de cette nouvelle fonctionnalité.

Tokopedia

Tokopedia a remplacé ses précédentes implémentations JavaScript personnalisées par des animations basées sur le défilement pour optimiser les performances de ses pages et améliorer l'expérience de navigation globale dans son entonnoir de conversion d'e-commerce.

Nous avons réussi à réduire jusqu'à 80% de nos lignes de code par rapport à l'utilisation d'événements de défilement JavaScript classiques. Nous avons également constaté que l'utilisation moyenne du processeur est passée de 50% à 2% lors du défilement. Andy Wihalim, ingénieur logiciel senior, Tokopedia

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 propose des animations différentes pour les mobiles et les ordinateurs sur sa page de destination Activités à découvrir, qui s'affiche tôt dans l'entonnoir de conversion pour tous les utilisateurs. Grâce aux animations liées au défilement, ils ont pu remplacer ces implémentations JavaScript personnalisées par du CSS pour obtenir le même effet.

Cas d'utilisation

Galerie de photos avec Image Reveal (pour mobile) et Cover Flow (pour ordinateur).

Code (mobile)

Dans l'exemple précédent, Tokopedia a utilisé la timeline de progression de défilement anonyme. Dans le code suivant, redBus utilise la timeline de progression de l'affichage nommée. L'animation modifie les opacity et clip-path de l'élément <img> dans le animation-range défini dans le conteneur de défilement de l'élément le plus proche, qui est le conteneur de défilement de la galerie de photos dans ce cas.

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%;
   }
`;

Nous sommes très heureux de voir cette fonctionnalité, car elle associe parfaitement les performances à une meilleure expérience, ce qui améliore nos signaux Page Experience pour le référencement SEO. De plus, la courbe d'apprentissage minimale en fait un outil indispensable pour tout site Web d'e-commerce. Nous avons également reçu des commentaires positifs et l'appui d'autres équipes pour exploiter la SDA pour plus de parcours utilisateur.— Amit Kumar, responsable technique senior, redBus.

Policybazaar

Comparer des contrats d'assurance est une action clé répétée par les utilisateurs pour guider leur processus de prise de décision. À l'aide d'animations basées sur le défilement, Policybazaar a réduit la taille des éléments de faible priorité en réponse au défilement de la table par l'utilisateur. Cela a permis d'obtenir une expérience de défilement fluide tout en améliorant la lisibilité.

Grâce aux animations basées sur le défilement, nous avons pu maximiser l'espace de la fenêtre d'affichage pour permettre à l'utilisateur de comparer les plans, ce qui garantit une expérience de lecture claire et sans encombrement.—Rishabh Mehrotra, responsable de la conception pour la BU d'assurance-vie, PolicyBazaar.

Code

Comme dans l'exemple précédent de Tokopedia, Policybazaar utilise la fonction scroll() pour définir une timeline de progression de défilement anonyme afin de contrôler la progression de l'animation CSS. Dans ce cas, la taille de la police est réduite et l'en-tête est estompé en fonction de la position de défilement dans l'animation-range définie.

@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;
  }
}

Les animations déclenchées par le défilement comme modèle courant tout au long du parcours utilisateur

Toutes les entreprises d'e-commerce présentées ont utilisé des animations déclenchées par le défilement sur des pages avec des fiches, afin d'attirer l'attention des utilisateurs sur ces fiches . Les exemples suivants montrent des effets de défilement sur les fiches à différents moments du parcours utilisateur. Pour ce faire, utilisez généralement une timeline de progression d'affichage anonyme pour contrôler la progression de l'animation CSS personnalisée, comme illustré dans l'extrait de code CSS suivant.

@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 (page d'accueil)

Policybazaar (page de fiche produit)

Tokopedia (page d'informations détaillées sur le produit)

Éléments à prendre en compte lors de l'utilisation de l'API Animations basées sur le défilement

Il est possible de polyfiller les animations basées sur le défilement pour les navigateurs non compatibles, par exemple avec le polyfill de la chronologie de défilement. Dans ce cas, des tests supplémentaires seront nécessaires pour vous assurer qu'il fonctionne correctement avec votre framework et que les navigateurs qui utilisent le polyfill ne rencontrent pas de défaillances d'animation ni d'expériences saccadées.

À partir de CSS, vous pouvez utiliser @supports pour vérifier la prise en charge d'animation-timeline avant d'utiliser des animations liées au défilement. Exemple :

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

}

Ressources

• Démonstrations d'animations basées sur le défilement
• Animer des éléments lors du défilement avec des animations liées au défilement
• Atelier de programmation: Premiers pas avec les animations liées au défilement en CSS
• Extension Chrome: débogueur d'animation basé sur le défilement
• Polyfill de la chronologie de défilement
• Voulez-vous signaler un bug ou suggérer une nouvelle fonctionnalité ? Votre avis nous intéresse !

Découvrez les autres articles de cette série qui expliquent comment les entreprises d'e-commerce ont tiré parti des nouvelles fonctionnalités CSS et d'UI telles que les transitions de vue, les pop-ups, les requêtes de conteneur et le sélecteur has().

• Pourquoi les fonctionnalités d'UI Web sont-elles importantes pour votre site d'e-commerce ?
• Afficher les études de cas sur Transitions
• Études de cas sur l'API Popover
• Études de cas sur les requêtes de conteneur
• Études de cas sur le sélecteur:has()