Le Cimetière JavaScript : Comment les Animations CSS Natives au Défilement Rendent Vos Bibliothèques d'Animation Obsolètes

Tous les quelques années, la plateforme web effectue un discret coup de force. Elle a absorbé ce que nous faisions avec jQuery. Elle a avalé ce que nous faisions avec les hacks Flexbox à base de polyfills. Maintenant, elle s'attaque à vos animations de défilement — et cette fois, elle a le thread Compositor de son côté.

L'API CSS Scroll-Driven Animations a atteint la stabilité cross-browser fin 2023 et se trouve depuis dans votre feuille de styles, pleinement opérationnelle, largement sous-utilisée. Si vous continuez à vous tourner vers GSAP ou Framer Motion chaque fois qu'un client dit « faites en sorte que le défilement soit agréable », vous livrez des kilo-octets que les utilisateurs n'ont pas demandés pour résoudre des problèmes que CSS gère désormais nativement.

Ce n'est pas un article à charge contre les bibliothèques d'animation. C'est une remise en question des choix par défaut.

Ce que Font Réellement les Animations CSS au Défilement (Et Ce Qu'Elles Ne Font Pas)

Dans son essence, la spécification Scroll-Driven Animations introduit deux nouveaux types de timeline qui remplacent la progression temporelle par défaut du document par la position de défilement comme moteur d'animation.

scroll() — lie la progression d'une animation à la position de défilement d'un conteneur de défilement spécifique (ou du viewport racine). En faisant défiler vers le bas, l'animation avance.
view() — lie la progression à la position d'un élément au sein de son conteneur de défilement. L'animation se joue au fur et à mesure que l'élément entre et sort de la zone visible.

Vous connectez ces timelines à l'API Web Animations existante ou à des déclarations CSS animation pures via la propriété animation-timeline :

.hero-title {
  animation: fade-up linear;
  animation-timeline: scroll(root);
  animation-range: entry 0% entry 40%;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

C'est tout. Pas d'IntersectionObserver. Pas de boucle requestAnimationFrame. Pas de nettoyage d'écouteurs d'événements. Le navigateur gère entièrement l'interpolation de la timeline.

Compatibilité navigateur mi-2024 : Chrome 115+, Edge 115+, et Firefox 110+ (derrière un flag jusqu'à la version 132, disponible dans la version stable en 2024). Safari est le traînard notoire — la prise en charge est partielle dans Safari 17.2+ mais pas complète. Cela signifie qu'une stratégie d'amélioration progressive reste de mise, mais la base Chromium seule couvre 65 à 70 % du trafic mondial, ce qui constitue un seuil légitime pour une adoption en production.

La sortie de secours @supports est votre alliée : @supports (animation-timeline: scroll()) vous permet d'ajouter un comportement au défilement par-dessus un repli statique sans toucher à une seule ligne de JavaScript.

L'Argument de Performance : Taille du Bundle, Saccades et Couches Composites

C'est là que l'argument devient difficile à ignorer.

Poids du Bundle

Les configurations d'animation au défilement les plus courantes dans la nature ressemblent à quelque chose comme ceci :

Approche	Poids de bundle ajouté
GSAP Core + ScrollTrigger	~67 Ko minifié
Framer Motion (tree-shaken)	~43 Ko minifié
AOS (Animate on Scroll)	~13 Ko minifié
CSS Scroll-Driven natif	0 Ko

Zéro. C'est dans le navigateur. Vous ne livrez pas le runtime — vous déclarez une intention, et la plateforme l'exécute.

Pour un site marketing typique avec quatre ou cinq effets de révélation au défilement, remplacer les animations pilotées par des bibliothèques par du CSS natif représente une réduction légitime de 40 à 70 Ko en coût d'analyse et d'exécution JavaScript. Sur un appareil Android milieu de gamme en 4G, c'est une amélioration mesurable du First Input Delay.

L'Avantage du Compositor

C'est le gain moins discuté, mais le plus important. Les animations JavaScript liées au défilement — même les configurations GSAP bien écrites — s'exécutent sur le thread principal, sauf si vous utilisez explicitement will-change, transform et opacity dans des conditions soigneusement isolées. Le thread principal gère également vos écouteurs d'événements, les re-rendus de votre framework et vos scripts tiers.

Les animations CSS Scroll-Driven qui animent transform et opacity s'exécutent sur le thread Compositor — un contexte d'exécution dédié et isolé qui n'entre pas en concurrence pour le temps du thread principal. Le moteur d'animation du navigateur gère l'interpolation au niveau matériel.

Dans les traces de performance de Chrome DevTools, les animations GSAP liées au défilement sur les propriétés transform apparaissent systématiquement dans le graphique de flamme du thread principal. Les équivalents CSS natifs ? Ils n'y apparaissent pas du tout. Ils sont composités en dehors du tableau.

En clair : Les animations CSS au défilement ne réduisent pas seulement la taille du bundle — elles transfèrent le travail d'animation hors de la ressource la plus disputée dans les performances du navigateur.

Cinq Effets de Défilement que Vous Pouvez Réécrire en CSS Pur Aujourd'hui

1. Apparition en Fondu au Défilement (L'Effet le Plus Surutilisé de l'Histoire du Web)

Le pattern classique IntersectionObserver + bascule de classe. Remplacez-le entièrement :

.card {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 10% entry 40%;
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

2. Barre de Progression Fixe

Les indicateurs de progression de lecture — un cas d'usage scroll() si parfait qu'on dirait que la spécification a été écrite pour lui :

#progress-bar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  transform-origin: left;
  animation: grow-bar linear;
  animation-timeline: scroll(root);
}
@keyframes grow-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

Pas d'état, pas de calcul, pas d'écouteur d'événement. Le navigateur est le calculateur de progression du défilement.

3. Sections Hero en Parallaxe

.hero-image {
  animation: parallax linear;
  animation-timeline: scroll(root);
  animation-range: cover 0% cover 100%;
}
@keyframes parallax {
  from { transform: translateY(0); }
  to   { transform: translateY(-25%); }
}

4. Carrousels à Défilement Horizontal Pilotés par le Défilement Vertical

L'un des effets d'agence les plus spectaculaires — appliquer un translateX sur une bande horizontale pendant que l'utilisateur fait défiler verticalement — est entièrement réalisable avec scroll() sur un élément conteneur épinglé. L'approche CSS-Tricks utilisant sticky + scroll-timeline gère cela sans une seule ligne de JavaScript.

5. Révélation d'Image / Animations Clip-Path à l'Entrée

.image-reveal {
  animation: clip-reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 50%;
}
@keyframes clip-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

Quand les Bibliothèques d'Animation JavaScript Méritent Encore leur Place

Voici la partie honnête. Les animations CSS au défilement ne remplacent pas intégralement l'écosystème d'animation JavaScript. Il existe des cas d'usage clairs et légitimes où des bibliothèques comme GSAP restent le bon choix :

Séquençage complexe et timelines. L'API Timeline de GSAP pour enchaîner des dizaines d'animations interdépendantes avec décalage, callbacks et branchements conditionnels n'a pas d'équivalent CSS. Si votre animation ressemble à une séquence de montage cinématographique, JavaScript l'emporte.

Mouvement basé sur la physique. La physique des ressorts, les courbes de momentum et les interactions de glisser-déposer — le domaine du useSpring de Framer Motion et de bibliothèques comme React Spring — ne sont pas reproductibles avec les seules fonctions d'accélération CSS.

Intégration Three.js et WebGL. Si votre défilement pilote la progression d'une scène 3D, des uniformes de shaders ou le mouvement de la caméra, vous avez besoin de JavaScript. Point final.

Animation dynamique pilotée par les données. Lorsque les paramètres d'animation proviennent d'entrées utilisateur, de réponses API ou d'un état à l'exécution, vous avez besoin de JavaScript pour les calculer et les appliquer. CSS ne peut pas interpoler entre des valeurs qu'il ne connaît pas au moment de l'analyse.

Exigences de navigateurs anciens. Si votre projet a un trafic significatif sous Safari < 17 ou nécessite une compatibilité IE11 (merci de partir), les animations CSS Scroll-Driven ne sont pas une stratégie principale sûre pour la production.

L'heuristique pratique : Si votre animation au défilement peut être entièrement décrite au moment du design et opère sur des propriétés animables en CSS, le CSS natif devrait être votre choix par défaut. Si elle doit réagir à des données, à un état ou au comportement de l'utilisateur — optez pour JavaScript.

Le Schéma Plus Large : CSS Reconquiert Son Territoire

Les Scroll-Driven Animations font partie d'un arc décennal où CSS devient genuinement capable de créer des interfaces utilisateur créatives que JavaScript avait colonisées par nécessité plutôt que par droit.

Les propriétés personnalisées (2016) → ont éliminé la plupart des hacks de thématisation pilotés par JS
position: sticky (2018) → a tué l'industrie des plugins d'en-têtes fixes
CSS Grid (2017) → a enterré la plupart des JavaScript de mise en page
clamp() et les container queries (2020–2022) → ont rendu largement obsolètes les calculs JS liés au viewport
Scroll-Driven Animations (2023) → la prochaine frontière conquise

Ce n'est pas CSS qui fait étalage de ses capacités. C'est la plateforme qui rattrape ce pour quoi les développeurs avaient construit des contournements. Chaque capacité absorbée par le navigateur représente du calcul que vous cessez de livrer, des dépendances que vous cessez de mettre à jour, et une surface d'attaque que vous cessez d'exposer.

Choisir le Bon Outil pour un Avenir CSS-First

La décision éclairée ici n'est pas d'arracher GSAP de chaque projet. C'est de relever votre seuil de justification avant d'y recourir.

Commencez par le CSS. Les Scroll-Driven Animations, combinées à @starting-style, transition-behavior et des fonctions d'accélération modernes comme linear() avec des courbes personnalisées, couvrent désormais la grande majorité des effets de défilement en production que les agences et les équipes produit livrent réellement.

Recourez à JavaScript lorsque l'animation est dynamique, basée sur la physique, séquencée au-delà de ce que les timelines CSS supportent, ou doit s'intégrer à l'état de l'application. Dans ces cas, GSAP et Framer Motion valent chaque octet.

Mais pour les révélations au défilement du quotidien, les indicateurs de progression, les couches parallaxes et les animations d'entrée qui constituent 80 % des briefs « donnez-lui un aspect premium » ? Votre feuille de styles a appelé. Elle dit qu'elle s'en occupe.

Le cimetière JavaScript ne se remplit pas du jour au lendemain — mais il y a une tombe fraîchement creusée avec « bibliothèque d'animation liée au défilement » sur la pierre tombale. Que vous la remplissiez dépend entièrement de si vous avez vérifié ce que CSS peut faire dernièrement.