Scroll storytelling.
Reproduire les transitions au scroll d’Active Theory ou d’Apple Vision Pro en JavaScript natif, sans Locomotive ni GSAP ScrollTrigger. Quatre-vingts lignes de code basées sur IntersectionObserver et CSS transforms.
Le pipeline
Comment ça marche, étape par étape.
- 01
IntersectionObserver.
On observe chaque section avec un seuil progressif (zéro, vingt-cinq, cinquante, soixante-quinze, cent pour cent). Chaque changement de seuil déclenche une mise à jour de variables CSS sur l’élément. Pas de boucle requestAnimationFrame, pas de calcul de scroll position en JavaScript.
- 02
Variables CSS comme pont.
Le JavaScript ne touche jamais directement les styles. Il met à jour une seule variable CSS custom (--progress) sur la section. Toute l’animation visuelle est définie en CSS pur, ce qui permet au navigateur d’optimiser le rendu sur le GPU.
- 03
CSS transforms uniquement.
Les animations passent par translate, scale et rotate sur la propriété transform, et par opacity. Ces deux propriétés sont les seules qui se composent sans déclencher de reflow ou repaint. Toute animation sur width, height, top, left est exclue.
- 04
Sticky positioning.
Pour les effets de « pin » (la section reste fixe pendant que l’animation se déroule), on utilise position sticky sur la section, avec hauteur de wrapper réglable pour contrôler la durée de l’animation au scroll. Pas besoin de scroll lock JavaScript.
- 05
prefers-reduced-motion.
Une media query CSS désactive automatiquement les animations pour les utilisateurs qui ont activé la préférence « motion réduit ». Le contenu reste accessible, l’animation devient une amélioration progressive.
À retenir
Pour des effets simples (fade, translate, scale au scroll), le natif suffit. GSAP reste pertinent pour les timelines complexes avec interpolations non-linéaires et synchronisation multi-éléments.
L’économie bundle est réelle : soixante-dix kilo-octets gzippés en moins, c’est trente à cinquante millisecondes de TTI sur une connexion 4G médiane.
Les variables CSS comme pont JavaScript-CSS sont sous-utilisées. Elles permettent de garder toute la logique d’animation en CSS et de limiter le JavaScript au strict minimum.
prefers-reduced-motion doit être systématique. Beaucoup de sites de motion design web 2026 l’oublient encore.
FAQ
Les questions qu’on me pose.
Pourquoi pas GSAP ScrollTrigger ?
GSAP ScrollTrigger reste l’outil de référence pour les animations vraiment complexes. Mais pour quatre-vingt pour cent des cas (parallaxe, fade au scroll, sticky reveal), le natif est plus léger, plus performant, et suffit largement.
Quel navigateur support ?
IntersectionObserver est supporté sur tous les navigateurs modernes depuis 2018 (Chrome, Firefox, Safari, Edge). Les variables CSS depuis 2017. Aucun polyfill nécessaire en 2026.
Comment gérer les sections très longues ?
Pour une section qui doit déclencher de nombreuses étapes, on découpe en sous-éléments observés individuellement. Le seuil de l’IntersectionObserver peut aussi être un tableau de valeurs intermédiaires (0.1, 0.2, 0.3...) pour granularité fine.
Le code est-il publié ?
Oui, le snippet complet (quatre-vingts lignes) est disponible dans la démo intégrée à cette page, copiable directement. Pas de paquet npm, c’est volontairement copie-colle pour éviter l’adoption de dépendance.
Et pour le scroll horizontal ?
Même technique, on observe les sections d’un wrapper horizontal et on déclenche les animations sur leur visibilité. Le seul ajout est un overflow-x scroll sur le wrapper et un snap-x pour le sentiment fluide.
Aller plus loin