Étude de cas sur les performances des animations liées au défilement

Yuriko Hirota

Nouveautés concernant les animations liées au défilement

Les animations liées au défilement permettent d'ajouter de l'interactivité et un intérêt visuel à votre site Web ou application Web, déclenchés par la position de défilement de l'utilisateur. C'est un excellent moyen de maintenir l'engagement des utilisateurs et de rendre votre site Web plus attrayant visuellement.

Auparavant, la seule façon de créer des animations liées au défilement était de répondre à l'événement de défilement sur le thread principal. Cela posait deux problèmes majeurs :

• Le défilement est effectué sur un thread distinct et fournit donc des événements de défilement de manière asynchrone.
• Les animations du thread principal sont sujettes à des saccades.

Il est donc impossible ou très difficile de créer des animations liées au défilement performantes et synchronisées avec le défilement.

Nous lançons un nouvel ensemble d'API pour prendre en charge les animations liées au défilement, que vous pouvez utiliser à partir de CSS ou de JavaScript. L'API tente d'utiliser le moins de ressources possible sur le thread principal, ce qui facilite grandement l'implémentation des animations liées au défilement et les rend beaucoup plus fluides. L'API d'animations liées au défilement est actuellement compatible avec les navigateurs suivants :

Cet article compare la nouvelle approche à la technique JavaScript classique pour montrer à quel point les animations liées au défilement peuvent être simples et fluides avec la nouvelle API.

Comparaison entre l'API CSS d'animations liées au défilement et JavaScript classique

La barre de progression suivante est créée à l'aide de techniques JavaScript classiques.

Le document répond chaque fois que l'événement scroll se produit pour calculer le pourcentage de scrollHeight que l'utilisateur a fait défiler.

document.addEventListener("scroll", () => {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

La démonstration suivante montre la même barre de progression à l'aide de la nouvelle API avec CSS.

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

La nouvelle fonctionnalité CSS animation-timeline convertit automatiquement une position dans une plage de défilement en un pourcentage de progression, ce qui facilite grandement la tâche.

Passons maintenant à la partie intéressante. Supposons que vous ayez implémenté un calcul très lourd sur les deux versions du site Web, ce qui consommerait la plupart des ressources du thread principal.

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

Comme vous vous en doutez, la version JavaScript classique devient saccadée et lente en raison de la jonction des ressources du thread principal. En revanche, la version CSS n'est pas affectée par le travail JavaScript lourd et peut répondre aux interactions de défilement de l'utilisateur.

L'utilisation du processeur est complètement différente dans les outils de développement, comme illustré dans les captures d'écran suivantes.

La démonstration suivante présente une application d'animation liée au défilement créée par CyberAgent. Vous pouvez voir que la photo s'affiche progressivement lorsque vous faites défiler la page.

Comparaison entre la nouvelle API JavaScript d'animations liées au défilement et JavaScript classique

L'avantage de la nouvelle API ne se limite pas à CSS. Vous pouvez également créer des animations liées au défilement très fluides à l'aide de JavaScript. Regardez l'exemple suivant :

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

Cela vous permet de créer la même animation de barre de progression que celle présentée dans la démonstration CSS précédente en utilisant uniquement JavaScript. La technologie sous-jacente est la même que celle de la version CSS. L'API tente d'utiliser le moins de ressources possible sur le thread principal, ce qui rend les animations beaucoup plus fluides que l'approche JavaScript classique.

De plus, cette nouvelle API fonctionne conjointement avec l'API Web Animations (WAAPI) et l'API CSS Animations existantes pour activer les animations liées au défilement déclaratives.

Plus de démonstrations et de ressources

Vous pouvez consulter les différentes implémentations d'animations liées au défilement sur ce site de démonstration, où vous pouvez comparer des démonstrations à l'aide de ces nouvelles API à partir de CSS et de JavaScript.

Si vous souhaitez en savoir plus sur les nouvelles animations liées au défilement, consultez cet article et la conférence I/O 2023.