Blanche
Blanche Agency

Blanche · Studio

© 2026

Adieu JavaScript : créer des expériences de défilement cinématographiques en pur CSS en 2025
←Retour au blog
Développement WebOptimisation des performancesConception de mouvement16 avril 2026·10 min de lecture

Adieu JavaScript : créer des expériences de défilement cinématographiques en pur CSS en 2025

La spécification CSS Scroll-Driven Animations a discrètement rendu les lourdes bibliothèques JavaScript de défilement superflues — voici comment livrer des en-têtes parallaxe, des révélations décalées et des indicateurs de progression fixes sans aucune surcharge JS.

La renaissance des animations au défilement que personne n'a vue venir

Pendant la majeure partie de la dernière décennie, si vous vouliez des animations au défilement parfaitement fluides sur un site en production, vous vous tourniez vers JavaScript. ScrollTrigger de GSAP est devenu la référence incontournable. Locomotive Scroll s'est glissé dans pratiquement tous les boilerplates des agences créatives. L'Intersection Observer a eu l'effet d'une révélation. Nous avons accepté que la magie du défilement signifiait embarquer des kilo-octets de logique d'orchestration, se battre contre les saccades sur les appareils Android d'entrée de gamme, et espérer que votre bibliothèque de défilement n'entrerait pas en conflit avec le lazy-loader de votre CMS.

Puis quelque chose a changé, discrètement.

Chrome 115 a livré le support complet de la spécification CSS Scroll-Driven Animations à la mi-2023, et d'ici 2025, la compatibilité navigateur a radicalement évolué. Ce qui avait débuté comme une proposition de spécification qui semblait presque trop belle pour être vraie — des animations au défilement natives, composées, sans JavaScript — est désormais un outil de production légitime. Ce n'est pas une histoire de polyfill. Ce n'est pas « attendez une adoption plus large ». C'est livrez-le maintenant, améliorez progressivement, dormez sur vos deux oreilles.

Voyons exactement comment cela fonctionne, où ça brille, et — point crucial — où vous devriez encore vous tourner vers JS.

Comprendre la spécification CSS Scroll-Driven Animations en termes simples

La spécification introduit deux primitives fondamentales qui fonctionnent en tandem avec l'API Web Animations existante et la propriété CSS animation : les timelines d'animation et les plages d'animation.

La propriété animation-timeline

Traditionnellement, les animations CSS sont pilotées par le temps — une durée en secondes ou en millisecondes. Les Scroll-Driven Animations remplacent cette horloge par une position de défilement. Vous définissez une timeline basée sur un conteneur de défilement, et le navigateur mappe la progression du défilement (de 0 % à 100 %) directement sur la progression de l'animation.

Il existe deux types de timelines :

  • scroll() — suit la progression du défilement d'un conteneur (par défaut, l'ancêtre défilable le plus proche ou le viewport)
  • view() — suit la distance parcourue par un élément à travers le viewport visible
.hero-parallax {
  animation: parallax-drift linear;
  animation-timeline: scroll(root block);
  animation-duration: auto; /* Requis — désactive la durée basée sur le temps */
}

@keyframes parallax-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-120px); }
}

Cet animation-duration: auto est la poignée de main secrète. Il indique au navigateur : n'utilise pas le temps, utilise la position de défilement comme moteur.

La timeline view() et animation-range

La fonction view() est là où les choses deviennent vraiment intéressantes pour les animations de révélation. Elle se déclenche en fonction du moment où un élément entre et sort du viewport, et non en fonction de la position de défilement dans la page.

.card {
  animation: fade-up both linear;
  animation-timeline: view();
  animation-range: entry 0% entry 40%;
}

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

animation-range vous permet de cibler des phases spécifiques : entry, exit, contain et cover. C'est l'équivalent des marqueurs start et end de ScrollTrigger — sans JavaScript.

Timelines nommées avec scroll-timeline-name

Pour coordonner des animations entre plusieurs éléments (imaginez une barre latérale fixe synchronisée avec une colonne de contenu défilante), vous pouvez nommer une timeline sur un parent et la consommer depuis un enfant :

.scroll-container {
  overflow-y: scroll;
  scroll-timeline-name: --main-scroll;
  scroll-timeline-axis: block;
}

.progress-bar {
  animation: grow-bar linear;
  animation-timeline: --main-scroll;
  animation-duration: auto;
}

Cette héritage de timeline du parent vers l'enfant est la pièce architecturale qui rend possible une chorégraphie complexe multi-éléments sans une seule ligne de JS.

Analyse des performances : CSS natif vs bibliothèques de défilement JS

Voici la vérité honnête sur pourquoi cela compte au-delà de l'élégance syntaxique : les animations au défilement JavaScript luttent architecturalement contre le navigateur, tandis que les animations CSS au défilement travaillent avec lui.

Lorsque ScrollTrigger de GSAP (ou toute bibliothèque de défilement) se déclenche, il :

  1. Écoute les événements de défilement sur le thread principal
  2. Calcule les positions des éléments, déclenchant potentiellement un layout/reflow
  3. Applique des mutations de style — que le navigateur doit ensuite composer

Même avec requestAnimationFrame et les optimisations will-change, vous touchez toujours le thread principal à chaque tick de défilement. Sur un écran 120 Hz, cela représente 120 opportunités par seconde d'introduire des saccades.

Les CSS Scroll-Driven Animations s'exécutent entièrement sur le thread du compositeur. Le moteur de rendu du navigateur gère les calculs d'animation en isolation de l'exécution JavaScript, du layout et de la peinture. Les événements de défilement n'atteignent jamais votre runtime JS.

Concrètement, cela signifie :

  • Aucune saccade due aux longues tâches JS bloquant les mises à jour liées au défilement
  • Aucune surcharge liée aux écouteurs de défilement — particulièrement importante sur mobile où la batterie et la limitation thermique affectent les performances JS
  • Aucun coût en taille de bundle — animation-timeline: scroll() ne coûte aucun octet
  • Mise en pause/reprise automatique lorsque l'onglet est en arrière-plan, sans code de cycle de vie personnalisé

Les propres benchmarks de l'équipe Chromium montrent que les animations CSS au défilement maintiennent 60 fps dans des conditions qui faisaient chuter les équivalents pilotés par GSAP à 40-45 fps sur des appareils d'entrée de gamme. Pour une agence créative qui livre des campagnes à un large public, cet écart est bien réel.

GSAP reste exceptionnel — mais pour les effets liés au défilement, vous payez désormais une taxe de performance dont vous pouvez vous passer.

Cinq effets de défilement prêts pour la production à livrer cette semaine

1. En-tête héro en parallaxe

Le grand classique. L'arrière-plan se déplace plus lentement que le défilement de la page :

.hero {
  background-image: url('/hero.jpg');
  background-attachment: fixed; /* Vieille astuce — ne pas utiliser */
  animation: hero-parallax linear;
  animation-timeline: scroll(root);
  animation-duration: auto;
}

@keyframes hero-parallax {
  to { background-position: center 40%; }
}

2. Indicateur de progression de lecture

Une barre de progression qui se remplit au fur et à mesure que l'utilisateur lit — zéro JS :

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: #6c63ff;
  transform-origin: left;
  animation: progress-grow linear;
  animation-timeline: scroll(root block);
  animation-duration: auto;
}

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

3. Grille de cartes avec révélation décalée

Donnez à chaque carte un délai avec animation-delay combiné aux timelines view() :

.card-grid .card {
  animation: card-reveal both ease-out;
  animation-timeline: view();
  animation-range: entry 10% entry 50%;
}

.card:nth-child(2) { animation-delay: calc(1 * 60ms); }
.card:nth-child(3) { animation-delay: calc(2 * 60ms); }
/* Continuez le motif ou utilisez @layer avec une boucle dans votre outil de build */

@keyframes card-reveal {
  from { opacity: 0; transform: scale(0.94) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

4. Étiquette de section fixe avec transitions en fondu

Un titre de section qui s'estompe à l'entrée et disparaît à la sortie :

.section-label {
  position: sticky;
  top: 2rem;
  animation: label-lifecycle linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

@keyframes label-lifecycle {
  0%, 100% { opacity: 0; }
  15%, 85% { opacity: 1; }
}

5. Texte en défilement horizontal synchronisé au scroll

Du texte qui se déplace latéralement au fur et à mesure que vous faites défiler vers le bas — un effet signature des agences créatives :

.marquee-text {
  white-space: nowrap;
  animation: marquee-slide linear;
  animation-timeline: scroll(root);
  animation-duration: auto;
}

@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-60%); }
}

Compatibilité navigateur et stratégies de repli gracieux

Soyons honnêtes sur l'état actuel des choses (à la mi-2025) :

  • Chrome/Edge 115+ : Support complet ✅
  • Firefox : Livré dans Firefox 110+ derrière un flag ; support complet sans flag disponible depuis Firefox 126 ✅
  • Safari : Partiel — les timelines scroll() sont arrivées dans Safari 18, le support de view() est encore en cours ⚠️

Cela signifie qu'environ 85 à 90 % du trafic mondial des navigateurs peut afficher des animations CSS au défilement nativement. C'est un chiffre viable en production — à condition de gérer correctement le repli.

Le motif @supports

Encadrez les styles d'animation au défilement dans une requête de fonctionnalité :

/* Styles de base — toujours visibles, sans animation */
.card {
  opacity: 1;
  transform: none;
}

/* Expérience enrichie pour les navigateurs compatibles */
@supports (animation-timeline: scroll()) {
  .card {
    opacity: 0;
    transform: translateY(30px);
    animation: card-reveal both ease-out;
    animation-timeline: view();
    animation-range: entry 10% entry 50%;
  }
}

C'est l'approche d'amélioration progressive : les navigateurs non compatibles voient la page statique, parfaitement lisible. Les navigateurs compatibles obtiennent la couche cinématographique par-dessus. Aucun contenu n'est jamais masqué pour qui que ce soit.

Quand charger un polyfill

Le polyfill scroll-driven-animations maintenu par l'équipe Chrome offre un repli basé sur JS pour les navigateurs plus anciens avec une fidélité raisonnable. Chargez-le conditionnellement :

if (!CSS.supports('animation-timeline: scroll()')) {
  import('/polyfills/scroll-timeline.js');
}

Cela garde votre bundle principal propre tout en élargissant la portée là où c'est nécessaire.

Quand se tourner quand même vers JavaScript

Rien de tout cela ne signifie que les bibliothèques JavaScript de défilement sont obsolètes. Il existe de véritables cas d'usage où les CSS Scroll-Driven Animations atteignent leurs limites :

  • Timelines séquencées complexes — L'API de timeline de GSAP permet d'enchaîner des dizaines d'animations avec des callbacks, des conditions et des valeurs dynamiques. CSS n'a pas d'équivalent en termes de flux de contrôle.
  • Logique déclenchée par le défilement, pas seulement des visuels — Charger des données lorsqu'un élément entre dans le viewport, suivre des événements analytiques, déclencher de l'audio — ce sont des préoccupations JavaScript.
  • Animations basées sur la physique ou les ressorts — Momentum, inertie, dépassement élastique. La propriété CSS animation-timing-function est expressive mais limitée comparée à un vrai moteur physique.
  • Campagnes critiques pour Safari — Si les analytics de votre client montrent plus de 30 % de trafic Safari, vous pourriez préférer GSAP comme pilote principal avec CSS comme cible de migration future.
  • Contenu dynamique avec une structure DOM inconnue — Lorsque vous ne pouvez pas anticiper quels éléments existent au moment du build, la flexibilité à l'exécution de JavaScript l'emporte.

Le bon choix en 2025 n'est pas « CSS contre JavaScript » — c'est « CSS en premier, JavaScript là où CSS atteint ses limites. »

Conclusion : la spécification est prête. Et vous ?

Les CSS Scroll-Driven Animations représentent l'un des ajouts les plus significatifs à la spécification CSS depuis des années — non pas parce qu'elles introduisent de flamboyants nouveaux effets visuels, mais parce qu'elles donnent au compositeur du navigateur la pleine maîtrise du mouvement lié au défilement. Le résultat : des expériences plus fluides avec moins de code, des bundles plus légers et aucun budget d'événements de défilement à gérer.

Pour les agences créatives, c'est un avantage concurrentiel qui se cache à la vue de tous. Les studios qui livrent encore chaque en-tête parallaxe via GSAP paient une taxe de performance que leurs clients n'ont jamais demandée. La recette est simple : adoptez les animations CSS au défilement par défaut, utilisez @supports pour conditionner l'expérience enrichie, et réservez JavaScript aux cas où vous avez genuinement besoin de logique à l'exécution.

Commencez par la barre de progression de lecture — elle tient en quatre lignes de CSS, elle est prête à être livrée dès aujourd'hui, et elle rendra immédiatement chaque développeur de votre équipe curieux de découvrir ce que l'on peut faire d'autre. Cette curiosité est exactement là où cette spécification mérite de vous emmener.

La renaissance des animations au défilement est là. Elle ne nécessite tout simplement pas de balise <script>.

←Retour au blog