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 liées au défilement constituent 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. Cela signifie que lorsque vous faites défiler l'écran vers le haut ou vers le bas, l'animation associée avance ou recule en réponse directe. Il peut s'agir, par exemple, d'images parallaxes en arrière-plan ou d'indicateurs de lecture qui se déplacent lorsque vous faites défiler l'écran.

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 liées au 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 timelines de défilement et les timelines d'affichage, de nouveaux concepts qui s'intègrent à l'API Web Animations (WAAPI) et à l'API CSS Animations, vous pouvez désormais exécuter des animations à défilement fluide en dehors 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 persistante supérieure change en fonction de la position de défilement dans la 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 valeurs opacity et clip-path de l'élément <img> dans le animation-range défini dans le conteneur de défilement ancêtre le plus proche de l'élément, qui est dans ce cas le conteneur de défilement de la galerie photo.

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 performances et meilleure expérience, ce qui améliore nos signaux d'expérience sur la page pour le référencement. 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

La comparaison des régimes 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 liées au 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 cartes à différentes parties du parcours utilisateur. Pour ce faire, utilisez généralement une chronologie de progression de la vue anonyme afin de contrôler la progression de l'animation CSS personnalisée, comme illustré dans l'extrait 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 de survol de l'animation par défilement lors du chargement des fiches produit sur la page de destination "Things To Do" de redBus.

Policybazaar (page de fiche produit)

Animation par défilement : fondu à l'ouverture et à la fermeture des fiches produit dans les secteurs d'activité Investissement et Vie.

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

Animation d'ouverture et de fermeture en fondu pendant que vous faites défiler les produits listés.

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

Il est possible d'émuler des animations liées au défilement pour les navigateurs non compatibles, par exemple avec le polyfill de timeline 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 liées au 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'animations pilotées par 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

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