Pour celles et ceux qui ont déjà réalisé des animations au défilement de la page vous avez sûrement utilisé par le passé des librairies comme scroll reveal ou animate on scroll. Moi-même, j’ai déjà passé de longues minutes sur ces sites à jouer avec ma barre de défilement (oui bon, chacun ses occupations…).
Peut-être avez-vous par la suite écrit du code vanilla maison ou utilisé l’API Intersection Observer pour déclencher une animation lorsqu’un élément entre dans le viewport. On s’est alors débarrassé des dépendances externes, mais pas du JavaScript.
Bonne nouvelle : il est désormais possible de réaliser ces animations sans écrire une seule ligne de JS. C’est ce que l’on va découvrir avec les scroll-driven animations en CSS.
Cela fait dix ans que les animations au scroll ont été proposées dans la spécification CSS. Après plus de cinq ans de développement, elles commencent enfin à être utilisables en production. Les scroll-driven animations (que l’on pourrait traduire en français par « animations pilotées par le défilement »), permettent d’animer un élément pendant le défilement. À ne pas confondre avec les scroll-triggered animations, qui se déclenchent à un moment donné du défilement (par exemple, quand un élément entre dans le viewport) et se jouent ensuite jusqu’au bout, sans interaction avec le scroll.
Le véritable avantage des scroll-driven animations se situe au niveau de la performance. Lorsque l’on réagit aux évènements du scroll en JavaScript on s’appuie sur le fil d’exécution principal. Si celui-ci est bloqué, les animations...
[Courte citation de 8% de l'article original]