Cette page a été traduite par l'API Cloud Translation.

É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é.

Navigateurs pris en charge

Source

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

Animation de la visibilité de la barre supérieure collante en fonction de la position de défilement de l'utilisateur.

Code

L'implémentation suivante 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. La visibilité de la barre supérieure persistante change en fonction de la position de défilement dans l'animationRange définie.

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 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).

Effet de révélation d'image par animation basée sur le défilement pour le chargement d'images dans la galerie de photos "Activités à découvrir" de redBus.

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.

Animation animate-timeline basée sur le défilement dans le tableau de comparaison des plans dans les secteurs d'activité "Investissement" et "Assurance-vie".

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)

Effet d'animation de survol pour le chargement des fiches produit sur la page de destination "Activités à découvrir" de redBus.

Policybazaar (page de fiche produit)

Animation de fondu d'entrée et de sortie des fiches produit dans les secteurs "Investissement" et "Assurance".

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

Animation de fondu en entrée et en sortie lors du défilement des produits listés.

É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().