É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 déclenchées par le défilement permettent d'ajouter de l'interactivité et de l'intérêt visuel à votre site Web ou application Web, en fonction de 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 basées sur le défilement était de répondre à l'événement de défilement sur le thread principal. Cela a entraîné deux problèmes majeurs :

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

Il est donc impossible ou très difficile de créer des animations performantes pilotées par le défilement et synchronisées avec celui-ci.

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 essaie d'utiliser le moins de ressources de thread principal possible, ce qui facilite grandement l'implémentation des animations basées sur le défilement et les rend beaucoup plus fluides. L'API d'animations pilotées par le 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 basées sur le défilement peuvent être faciles 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 de classe.

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 fait le gros du travail.

Voici maintenant la partie intéressante : imaginons que vous ayez implémenté un calcul très lourd sur les deux versions du site Web, 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 doutiez peut-être, 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 absolument pas affectée par le travail JavaScript intensif 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 le montrent les captures d'écran suivantes.

La démo suivante montre une application d'animation pilotée par le défilement créée par CyberAgent. Vous pouvez voir que la photo apparaît progressivement lorsque vous faites défiler la page.

Nouvelle API JavaScript pour les animations basées sur le défilement par rapport à JavaScript classique

Les avantages de la nouvelle API ne se limitent pas au CSS. Vous pouvez également créer des animations fluides pilotées par le défilement à l'aide de JavaScript. Prenons 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émo CSS précédente, mais en utilisant uniquement JavaScript. La technologie sous-jacente est la même que celle de la version CSS. L'API essaie d'utiliser le moins de ressources de thread principal possible, ce qui rend les animations beaucoup plus fluides que l'approche JavaScript classique.

De plus, cette nouvelle API fonctionne conjointement avec les API Web Animations (WAAPI) et CSS Animations existantes pour permettre les animations déclaratives basées sur le défilement.

Autres démonstrations et ressources

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

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