Locomotive Scroll ou GSAP ScrollTrigger

Locomotive Scroll est le meilleur point de départ pour une page axée sur le design où le défilement fluide, la parallaxe, la détection dans la fenêtre d'affichage et une petite API sont les principales préoccupations. Sa version v5 actuelle est construite sur Lenis et pèse 9,4 ko compressé en gzip, selon la documentation officielle de Locomotive Scroll, consultée le 13 octobre 2026.

GSAP ScrollTrigger est le meilleur point de départ lorsque le contrôle de l'animation est la partie difficile. Son API couvre les déclencheurs, le scrub, l'épinglage, l'aimantation, les fonctions de rappel, le mouvement horizontal, les conditions adaptatives et les défileurs personnalisés dans un seul système d'animation. ScrollTrigger ne fournit pas à lui seul un moteur de défilement fluide distinct. Pour lisser le défilement natif dans GSAP, l'outil pertinent est ScrollSmoother.

La plus grande différence tient à l'origine du mouvement. Locomotive Scroll présente le défilement fluide comme une partie du rôle de base de la bibliothèque. Sa documentation v5 indique que le défilement fluide est activé par défaut grâce à Lenis, et sa fonction de rappel de défilement expose la position, la vitesse, la direction et la progression.

Ce modèle fonctionne bien lorsque vous voulez que toute la page ait un rythme commun. Vous pouvez associer data-scroll-speed pour créer de la parallaxe, écouter des événements personnalisés natifs ou exposer la progression sous forme de variable CSS. La bibliothèque prend aussi en charge un élément d'enveloppe et de contenu personnalisé lorsque la page a besoin d'un défileur contenu.

ScrollTrigger part d'une hypothèse différente. Il surveille la position de défilement du navigateur et calcule le moment où un déclencheur doit commencer et se terminer. Son option scrub lie la progression de l'animation à cette position. Une valeur numérique, comme scrub: 0.5, fait en sorte que la tête de lecture prend 0,5 seconde pour rattraper son retard, comme le montre la documentation de configuration de ScrollTrigger, consultée le 13 octobre 2026.

Cela vous donne un contrôle fin sur chaque animation, mais ne rend pas l'ensemble de la page fluide par défaut. Si vous voulez une couche de lissage sur toute la page, utilisez ScrollSmoother ou reliez ScrollTrigger à un défileur tiers au moyen de scrollerProxy().

Locomotive Scroll et GSAP peuvent fonctionner ensemble, mais l'intégration a un coût : un système doit devenir la source de vérité de la position de défilement. Si Locomotive Scroll pilote la page, ScrollTrigger a besoin du défileur actuel et d'un chemin de mise à jour. Si GSAP pilote la page par ScrollSmoother, laissez ScrollTrigger gérer le cycle de vie de l'animation et du lissage.

Le schéma sûr est simple :

1. Choisissez une seule bibliothèque pour gérer la position de défilement.
2. Enregistrez l'intégration avant de créer les déclencheurs.
3. Rafraîchissez les mesures des déclencheurs une fois que les images, les polices et le contenu dynamique se sont stabilisés.
4. Détruisez les deux instances lorsqu'une route ou un composant est démonté.
5. Testez le focus au clavier, le mouvement réduit, le défilement tactile et les éléments en position fixe.

La méthode refresh() de ScrollTrigger recalcule les positions de début et de fin. Cela compte lorsque la mise en page change après la création des déclencheurs. Les indications d'intégration de GSAP précisent aussi que les mesures se fondent sur le flux du document, et non sur une mise en page remesurée en continu.

Évitez de faire tourner deux boucles de lissage indépendantes. Vous pourriez vous retrouver avec des déclencheurs en retard, des positions d'épinglage incorrectes ou une page qui semble déconnectée de la barre de défilement. La combinaison la plus propre consiste habituellement à confier à Locomotive Scroll l'entrée de défilement et la détection, et à GSAP les séquences qui exigent plus de contrôle.

Le défilement fluide est un effet visuel; il lui faut donc une porte de sortie. Locomotive Scroll v5 documente une barre de défilement native, la navigation au clavier, la prise en charge d'ARIA et la désactivation automatique de la parallaxe sur les appareils tactiles. Son guide de migration explique que la v5 a retiré le comportement de barre de défilement personnalisée et utilise par défaut le défilement natif au toucher, consulté le 13 octobre 2026.

C'est un réglage par défaut utile sur mobile. Vous pouvez tout de même activer la parallaxe tactile avec data-scroll-enable-touch-speed, mais vous devriez avoir une raison de le faire. Un appareil qui doit suivre directement un doigt ne devrait pas donner l'impression d'être tiré par un effet de bureau en retard.

GSAP ScrollTrigger part lui aussi du défilement natif. Cela évite le problème de la fausse barre de défilement lorsque vous utilisez ScrollTrigger seul. Le risque apparaît lorsque vous ajoutez une couche de lissage fondée sur les transformations. La documentation de ScrollSmoother de GSAP indique que le contenu est déplacé par des transformations et que les éléments fixes devraient se trouver à l'extérieur de l'enveloppe, car les transformations créent un nouveau bloc conteneur.

Dans les deux configurations, respectez prefers-reduced-motion. Réduisez ou retirez la parallaxe, le scrub et les assouplissements longs lorsqu'une personne demande moins de mouvement. Gardez le contenu et l'ordre du clavier cohérents sans l'effet. Le mouvement doit ajouter de l'ambiance, pas devenir la seule façon de comprendre une page.

Aucune des deux bibliothèques ne vous donne une cote de performance du simple fait de l'installer. La page paie tout de même pour les images, les polices, le JavaScript, le travail de mise en page, le rendu et chaque animation que vous liez au défilement.

Locomotive Scroll v5 réduit sa propre empreinte à 9,4 ko compressé en gzip. Sa documentation décrit une stratégie à double Intersection Observer : un chemin gère la simple détection dans la fenêtre d'affichage et un autre gère les effets continus, les éléments ne se joignant à la boucle d'animation que lorsqu'ils sont visibles et qu'ils ont besoin de mises à jour. C'est un choix judicieux pour les pages comportant de nombreux petits effets de parallaxe.

Le même guide de migration compare le paquet de 9,4 ko compressé en gzip de la v5 à environ 12,1 ko pour la v4. Ces chiffres décrivent le paquet de la bibliothèque, pas la performance de votre page terminée. Considérez-les comme du contexte d'implantation, pas comme une promesse sur la fréquence d'images.

ScrollTrigger est efficace lorsque vous gardez le travail ciblé. Sa documentation décrit des événements de défilement antirebond, des mises à jour synchronisées, des calculs de redimensionnement limités et des positions de déclencheurs précalculées. Il vous donne aussi des outils pour limiter le travail : once, matchMedia(), batch(), les vérifications de visibilité et kill() pour le nettoyage.

Le véritable test de performance est une page représentative sur un téléphone de milieu de gamme. Enregistrez la fluidité du défilement pendant qu'une section épinglée, une grande image, un texte fractionné et une vidéo ou une scène WebGL s'exécutent ensemble. Recommencez ensuite avec le mouvement réduit et un réseau lent. Une comparaison de bibliothèques ne peut pas remplacer ce test.

ScrollTrigger l'emporte lorsque l'animation elle-même est le produit. Son modèle d'épinglage garde une section en place pendant que le reste de la page défile. Son option snap peut arrêter une séquence sur des étiquettes ou des valeurs de progression. Ses fonctions de rappel exposent les états d'entrée, de sortie, de mise à jour, de rafraîchissement, de direction et de vitesse. Vous pouvez aussi relier une séquence à une animation de conteneur horizontal.

Locomotive Scroll est plus direct lorsque l'effet est rattaché à un élément. Les attributs de données rendent lisible, dans le HTML, le travail courant de parallaxe et de détection dans la fenêtre d'affichage. Les événements de progression et les variables CSS sont utiles lorsque le CSS doit réagir au défilement sans grand graphe d'animation.

Le compromis oppose profondeur et surface. ScrollTrigger vous donne plus de contrôle et plus de configuration à gérer. Locomotive Scroll vous donne un vocabulaire plus restreint pour les effets de défilement courants et vous demande d'apporter un autre outil lorsqu'une séquence devient très chorégraphiée.

Choisissez Locomotive Scroll lorsque :

• La page a besoin d'une sensation de défilement fluide uniforme d'une section à l'autre.
• La parallaxe et la détection dans la fenêtre d'affichage couvrent l'essentiel du brief d'interaction.
• L'équipe préfère une petite API typée et des attributs de données HTML.
• Le comportement tactile et le défilement natif sont des exigences centrales.

Choisissez GSAP ScrollTrigger lorsque :

• Le concept repose sur des chapitres épinglés ou sur une séquence étroitement liée à la progression.
• Vous avez besoin de scrub, d'aimantation, de vitesse, de fonctions de rappel ou d'animation de conteneur horizontal.
• L'équipe utilise déjà GSAP pour d'autres travaux d'animation.
• Le défilement natif est acceptable, ou vous prévoyez d'ajouter ScrollSmoother délibérément.

Choisissez les deux lorsque le projet exige la sensation de défilement de Locomotive Scroll et le contrôle de séquences de GSAP. Dans ce cas, décidez quelle bibliothèque gère le défilement avant d'écrire le premier déclencheur. Cette seule décision prévient la plupart des problèmes d'intégration.

• Documentation de Locomotive Scroll : architecture v5, paquet de 9,4 ko, accessibilité et fonctionnalités de base.
• Guide de migration de Locomotive Scroll : changements de la v4 à la v5, intégration de Lenis, comportement tactile et comparaison avec les 12,1 ko de la v4.
• Documentation de GSAP ScrollTrigger : déclencheurs, scrub, épinglage, aimantation, fonctions de rappel et défileurs personnalisés.
• Documentation de GSAP ScrollSmoother : défilement natif, lissage, effets et mises en garde sur le contenu transformé.