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

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 lié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 revient en arrière en réponse directe. Il peut s'agir, par exemple, d'images de fond en parallaxe ou d'indicateurs de lecture qui se déplacent lorsque vous faites défiler l'écran.

Les développeurs créent généralement des animations liées au défilement en utilisant 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 diffusés de manière asynchrone, et cela entraîne souvent des à-coups en raison de la présence sur le thread principal.

Toutefois, dans le cadre des nouvelles fonctionnalités CSS et UI disponibles dans les navigateurs, vous pouvez désormais créer des animations déclaratives basées sur le 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 existantes, vous pouvez désormais exécuter des animations fluides et fluides à partir du thread principal, avec seulement quelques lignes de code. Dans cette étude de cas, découvrez comment Tokopedia, redBus et Policybazaar bénéficient déjà de cette nouvelle fonctionnalité.

Tokopedia

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

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

Code

L'implémentation suivante utilise la fonction scroll() pour définir une chronologie de progression du 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 différentes animations pour les mobiles et les ordinateurs sur sa page de destination Activités à découvrir, que tous les utilisateurs voient au début de l'entonnoir de conversion. Grâce aux animations liées au défilement, l'équipe a pu remplacer ces implémentations JavaScript personnalisées par du CSS pour obtenir le même effet.

Cas d'utilisation

Galerie photo avec Image Reveal (pour mobile) et Cover Flow (pour ordinateur)

Code (mobile)

Dans l'exemple précédent, Tokopedia a utilisé la chronologie de progression du défilement anonyme. Dans le code suivant, redBus utilise le calendrier de progression de la vue nommé. L'animation modifie les opacity et clip-path de l'élément <img> dans la animation-range définie à l'intérieur de l'ancêtre le plus proche de l'élément, qui est le conteneur de défilement de la galerie photo 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 offre une combinaison parfaite entre performances et meilleure expérience utilisateur. Elle renforce ainsi nos signaux d'expérience sur la page pour le SEO. De plus, sa courbe d'apprentissage minimale en fait un outil indispensable pour chaque site Web d'e-commerce. Nous avons également reçu des commentaires positifs et le soutien d'autres équipes pour tirer parti des SDA pour davantage de parcours utilisateur.— Amit Kumar, responsable ingénierie 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. Il en résulte une expérience de défilement fluide tout en améliorant la lisibilité.

Grâce aux animations liées au défilement, nous avons pu maximiser l'espace de la fenêtre d'affichage pour permettre à l'utilisateur de comparer les forfaits, ce qui offre une expérience de lecture ciblée et épurée. – Rishabh Mehrotra, Head of Design for Life Insurance BU, PolicyBazaar

Code

Comme dans l'exemple précédent de Tokopedia, Policybazaar utilise la fonction scroll() pour définir une chronologie de progression du défilement anonyme afin de contrôler la progression de l'animation CSS. Dans ce cas, nous réduisons la taille de la police et fondons l'en-tête en fonction de la position de défilement dans le animation-range défini.

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

Animations basées sur le défilement comme modèle commun tout au long du parcours utilisateur

Toutes les entreprises d'e-commerce mises en avant ont utilisé des animations liées au défilement sur les pages contenant des fiches, afin d'animer ces dernières pour attirer l'attention des utilisateurs . Les exemples suivants montrent les effets de défilement sur les fiches à différentes parties du parcours utilisateur. Pour ce faire, vous devez généralement utiliser une chronologie de progression de la vue anonyme afin de contrôler la progression de l'animation CSS personnalisée, comme indiqué 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 des fiches produit)

Tokopedia (page d'informations sur le produit)

Éléments à prendre en compte lors de l'utilisation de l'API Scroll-driven Animations

Il est possible de polyfiller des animations liées au défilement pour les navigateurs non compatibles, par exemple avec le polyfill de défilement chronologique. Le cas échéant, des tests supplémentaires seront nécessaires pour s'assurer qu'il fonctionne bien avec votre framework et que les navigateurs utilisant le polyfill ne rencontrent pas d'échecs d'animation ni de problèmes d'à-coups.

En CSS, vous pouvez utiliser @supports pour tester la prise en charge de la chronologie des animations 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 basées sur le défilement
• Polyfill avec ligne de défilement
• Souhaitez-vous signaler un bug ou une nouvelle fonctionnalité ? Votre avis nous intéresse !

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

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