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

Yuriko Hirota

Quelles sont les nouveautés des animations liées au défilement ?

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

Auparavant, le seul moyen 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 a entraîné deux problèmes majeurs :

• Le défilement est effectué sur un thread distinct et génère donc des événements de défilement de manière asynchrone.
• Les animations du thread principal sont soumises à des à-coups.

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

Nous lançons aujourd'hui 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 et la fluidité des animations basées sur le défilement. L'API d'animation basée sur 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 simples et fluides avec la nouvelle API.

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

L'exemple de barre de progression suivant est créé à 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 pourcentage de progression, ce qui fait tout le travail.

Voici la partie intéressante. Disons que vous avez implémenté un calcul très lourd sur les deux versions du site Web, qui utiliserait 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 du tout 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 le montrent les captures d'écran suivantes.

La démonstration suivante montre une application d'animation basée sur le défilement créée par CyberAgent. Comme vous pouvez le voir, la photo apparaît en fondu à mesure que vous faites défiler la page.

Nouvelle API JavaScript d'animations basées sur le défilement par rapport au JavaScript classique

Les avantages de la nouvelle API ne se limitent pas au CSS. Vous pouvez également créer des animations fluides basées sur le défilement à l'aide de JavaScript. Examinez 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,
    }),
  }
);

Vous pouvez ainsi créer la même animation de barre de progression que dans la démo CSS précédente en utilisant uniquement JavaScript. La technologie sous-jacente est la même que la version CSS. L'API tente d'utiliser le moins de ressources de thread principal possible, ce qui rend les animations beaucoup plus fluides par rapport à l'approche JavaScript classique.

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

Autres démonstrations et ressources

Vous pouvez découvrir les différentes implémentations d'animations basées sur le défilement sur ce site de démonstration, où vous pouvez comparer les démonstrations utilisant ces nouvelles API 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 Google I/O 2023.