Animation au scroll : GSAP, Intersection Observer et CSS

Animation au scroll : ce que c'est et à quoi elle sert

Une animation au scroll est un mouvement relié au défilement de la page. Un bloc de texte apparaît en fondu quand il entre à l'écran, une image glisse légèrement, une barre indique où en est la lecture. Sur un site d'entreprise, ces effets n'ont qu'un rôle légitime : guider l'attention vers ce qui fait vendre. Le reste relève de la décoration, et la décoration se paie en temps de chargement.

Déclencher ou piloter : deux logiques différentes

On distingue d'abord l'effet déclenché par le scroll (animation jouée une seule fois au passage d'un seuil). L'élément devient visible, une classe lui est ajoutée, le navigateur joue une transition de quelques centaines de millisecondes. La seconde logique pilote l'effet en continu : chaque pixel de défilement le fait avancer ou reculer. On parle alors d'animation scroll-driven, littéralement « pilotée par le défilement ».

• Intersection Observer : une API JavaScript native qui signale quand un element entre dans la zone visible ou en sort. Idéale pour déclencher.
• CSS animation-timeline : la propriété qui relie des keyframes au défilement, sans une ligne de JavaScript. Idéale pour piloter des effets simples.
• GSAP et son extension ScrollTrigger : une bibliothèque JavaScript qui orchestre des séquences entières, épingle des sections et synchronise plusieurs éléments.

Pourquoi un dirigeant de PME devrait s'en soucier

Une page qui se lit bien convertit mieux. Un effet bien placé met en valeur un argument, une étape de votre méthode ou un bouton d'appel à l'action. Un effet mal placé fait l'inverse : il retarde l'affichage du contenu, fatigue sur mobile et peut dégrader vos Core Web Vitals, donc votre visibilité sur Google. La bonne question n'est jamais « peut-on animer ? » mais « qu'est-ce que cette animation fait gagner ? ».

Étape 1 : décider où l'animation doit servir

Avant de choisir un outil, listez les sections de la page et leur rôle. Une page de service contient en général une accroche, des preuves, une offre et un formulaire. Seuls deux ou trois moments méritent un mouvement. Tout animer revient à ne rien souligner.

• L'arrivée des arguments clés, en fondu léger, pour rythmer la lecture.
• Un schéma ou un processus en étapes, révélé à mesure que le visiteur avance.
• Une barre de progression sur un article long, qui indique la longueur restante.
• Un léger effet de parallaxe sur un visuel d'ambiance, jamais sur un texte à lire.

Regardez aussi qui consulte la page. Un public qui navigue surtout sur téléphone tolère mal les effets lourds. Une clientèle professionnelle sur ordinateur, qui compare des offres, appréciera en revanche un schéma animé qui clarifie votre méthode. Le choix de l'outil découle directement de ces réponses.

Étape 2 : Intersection Observer pour les apparitions simples

Intersection Observer est la solution la plus légère pour faire apparaître des blocs. L'API est intégrée à tous les navigateurs modernes et ne demande aucune bibliothèque. Le principe : vous observez des éléments, et le navigateur vous prévient quand ils croisent la zone visible. Vous ajoutez alors une classe, et le CSS fait le reste.

Le code minimal, étape par étape

• Dans le HTML, marquez les blocs à révéler, par exemple avec une div class reveal autour de chaque argument.
• Dans le CSS, donnez à .reveal un état de départ : opacity: 0 et transform: translateY(24px), avec une transition sur ces deux propriétés.
• Créez une règle .reveal.is-visible qui ramène opacity à 1 et transform à none.
• En JavaScript, créez l'observateur avec new IntersectionObserver(callback, { threshold: 0.2 }), puis appelez observe() sur chaque bloc.
• Dans le callback, quand entry.isIntersecting est vrai, ajoutez la classe is-visible et cessez d'observer le bloc avec unobserve().

Les trois réglages qui changent tout

L'option root désigne la zone de référence. Par défaut, c'est la fenêtre du navigateur : vous ne la changez que si le contenu défile dans un conteneur à part. L'option rootMargin agrandit ou rétrécit cette zone, par exemple de 10 % en bas pour attendre que le bloc soit bien entré. L'option threshold fixe la part de l'élément qui doit être visible avant le déclenchement.

Ces trois valeurs se règlent à l'œil, sur un vrai téléphone. Un seuil trop élevé sur un grand bloc peut ne jamais se déclencher sur un petit écran. Un seuil de 0 combiné à une marge négative donne souvent le rendu le plus naturel.

Ses limites

Intersection Observer sait dire si un élément est visible, pas où il en est précisément. Pour un effet qui suit le doigt image après image, il faudrait écouter l'événement scroll et recalculer des positions en permanence, ce qui sollicite fortement le processeur. C'est là que les deux autres outils prennent le relais.

Étape 3 : animation-timeline, l'animation scroll-driven en CSS pur

La propriété animation-timeline relie des keyframes CSS classiques au défilement plutôt qu'au temps. Le navigateur calcule lui-même la progression, souvent hors du fil principal, ce qui garde la page fluide. Pour un fondu, une barre de lecture ou une parallaxe discrète, c'est désormais l'option la plus simple.

Une apparition en fondu en quelques lignes

Voici la recette la plus demandée : une scroll-driven fade animation, où chaque bloc apparaît à mesure qu'il entre à l'écran. Déclarez des keyframes nommées fondu, avec from { opacity: 0; transform: translateY(40px) } vers un état final sans décalage. Sur l'élément, écrivez ensuite animation: fondu linear both; animation-timeline: view(); puis animation-range: entry 0% cover 40%. La valeur linear évite un double amortissement, et both conserve l'état de départ avant l'entrée et l'état final après.

Ce type de driven fade animation remplace le script Intersection Observer quand le navigateur le prend en charge. La différence se voit en remontant la page : l'effet se rejoue à l'envers, ce qui donne une sensation plus organique. Si vous préférez un déclenchement unique, gardez la solution JavaScript.

View() ou scroll() : deux sources de progression

Vous écrirez animation-timeline: view() ou scroll() selon ce que vous voulez suivre. Avec view(), la progression dépend de la position de l'élément dans la zone visible : elle commence quand il entre et s'achève quand il sort. Avec scroll(), elle suit la barre de défilement d'un conteneur entier, du haut jusqu'en bas. La barre de lecture d'un article utilise donc scroll(), le fondu d'un bloc utilise view().

Par défaut, scroll() vise le conteneur défilant le plus proche, désigné par le mot nearest, sur l'axe block, c'est-à-dire vertical pour un texte en français. Vous pouvez viser la racine du document avec scroll(root), ou le scroll-container formé par l'élément lui-même avec scroll(self). Avec scroll() scroll et animation avancent ensemble : la barre de lecture fait passer sa width, ou mieux son transform: scaleX, de 0 à 1.

Range, entry, cover : régler le moment précis

La propriété animation-range découpe la progression en phases. entry correspond à l'entrée de l'élément dans l'écran, exit à sa sortie, cover au trajet complet, contain au moment où il est entièrement visible. En combinant ces mots et des pourcentages, vous décidez par exemple que l'effet se termine dès que le bloc a parcouru un tiers de l'écran, au lieu de traîner jusqu'en haut.

Timelines nommées et conteneurs

Quand l'élément animé n'est pas celui qui défile, on donne un nom à la source. Sur le container défilant, déclarez scroll-timeline: --galerie block, puis sur l'élément cible animation-timeline: --galerie. La propriété longue scroll-timeline-name existe aussi, et timeline-scope permet de partager un nom entre deux éléments éloignés dans le HTML. Attention : le conteneur doit avoir un overflow réglé sur auto ou scroll et une height limitée, sinon il ne défile pas et rien ne bouge.

Compatibilité : chrome d'abord, les autres ensuite

Chrome et les navigateurs basés sur Chromium gèrent ces propriétés depuis plusieurs versions. Safari les a intégrées plus récemment, tandis que Firefox les propose de façon variable selon les versions : vérifiez l'état actuel sur Can I use avant de vous engager. La bonne pratique consiste à encadrer le code dans @supports (animation-timeline: view()). Les navigateurs qui ne comprennent pas affichent alors le contenu sans effet, ce qui reste parfaitement acceptable.

Étape 4 : GSAP et ScrollTrigger pour les scènes complexes

GSAP est une bibliothèque JavaScript d'animation très répandue chez les studios web. Son extension ScrollTrigger relie n'importe quelle animation au défilement, avec un contrôle que le CSS n'offre pas encore. Dans la documentation anglophone, ce principe porte souvent le nom de scroll-linked element animation. On la choisit pour raconter une séquence : un produit qui se monte pièce par pièce, une section épinglée pendant que trois arguments défilent, des compteurs qui s'enchaînent.

La timeline GSAP, cœur du système

Une timeline GSAP aligne plusieurs mouvements les uns après les autres, ou en parallèle. Vous la créez avec gsap.timeline(), puis vous lui passez un objet scrollTrigger : l'élément déclencheur, les positions de début et de fin, et l'option scrub pour lier l'avancement au défilement. Avec scrub, chaque cran de molette fait avancer la scène. Sans scrub, la séquence se joue d'un coup au passage du seuil.

Les options à connaître

• start et end : où commence et finit l'effet, par exemple top 80% pour démarrer quand le haut de l'élément atteint 80 % de la hauteur d'écran.
• pin : épingle une section pendant que l'animation se déroule, technique à manier avec prudence sur mobile.
• scrub : relie la progression au défilement, avec un léger lissage si vous indiquez un nombre.
• markers : affiche des repères visuels pendant le développement, à retirer avant la mise en ligne.
• onUpdate : donne accès à self.progress, une valeur de 0 à 1 utile pour piloter un compteur ou une vidéo.

Quand GSAP vaut son poids

GSAP ajoute un fichier à charger, et ScrollTrigger un second. Sur une page de vente ambitieuse, ce coût se justifie si la scène porte vraiment le message. Sur une page vitrine classique, Intersection Observer ou le CSS suffisent largement, comme l'explique notre comparatif animation CSS ou JavaScript. Lisez aussi les conditions de licence sur le site officiel avant tout projet commercial : elles ont évolué ces dernières années.

Les pièges à éviter et ce qui fait varier le coût

Respecter prefers-reduced-motion

Certaines personnes ressentent des nausées ou des vertiges face aux mouvements à l'écran. Leur système propose un réglage pour réduire les animations, que le site peut lire grâce à la media query prefers-reduced-motion. Dans votre CSS, placez les effets dans un bloc @media (prefers-reduced-motion: no-preference), ou neutralisez-les dans le cas reduce. Côté JavaScript, gsap.matchMedia() applique la même règle.

Ce n'est pas une option de confort : respecter le réglage reduced-motion fait partie des bonnes pratiques d'accessibilité web. Un audit sérieux vérifie aussi que le contenu reste lisible si aucune animation ne se joue. Testez en activant l'option dans les paramètres de votre téléphone : tout doit rester visible.

Ne jamais cacher le contenu

Un bloc qui démarre à opacity 0 et dépend d'un script reste invisible si ce script échoue. Ajoutez donc la classe de départ en JavaScript plutôt que dans le HTML : sans script, le contenu s'affiche normalement. Google rend les pages avec un vrai navigateur, mais un texte masqué trop longtemps ne sert ni votre référencement ni votre visiteur pressé.

Surveiller la performance

Les animations au scroll sont une cause fréquente de saccades sur mobile. Les coupables habituels : un écouteur scroll qui recalcule tout, des propriétés de mise en page animées, trop d'images lourdes en mouvement simultané. Mesurez avec l'onglet Performance des outils de développement de Chrome et avec PageSpeed Insights. La performance perçue compte autant que le chiffre brut : un fondu court donne une impression de rapidité, un fondu lent l'impression inverse.

Gardez des durées courtes et des distances modestes. Si l'effet ralentit la lecture, il gêne plus qu'il ne sert, ce n'est plus vraiment une animation. Scroll après scroll, le visiteur doit trouver l'information sans attendre la fin d'un mouvement.

Ce qui fait varier le temps et le budget

• Le nombre de sections animées et leur complexité : un fondu générique se pose une fois pour tout le site, une scène épinglée se conçoit sur mesure.
• L'outil retenu : le CSS et Intersection Observer demandent peu de code, GSAP demande davantage de réglages et de tests.
• Les maquettes : des intentions de mouvement prévues dès la conception, par exemple dans un prototype Figma, évitent les allers-retours.
• L'environnement : sur WordPress, une extension d'animation ajoute souvent du poids qu'un thème codé proprement évite ; avec Tailwind, des classes utilitaires accélèrent l'intégration.
• Les tests : plusieurs navigateurs, plusieurs tailles d'écran, le mode mouvement réduit activé.

Chez RankerSquare, un site vitrine sur-mesure est proposé dès 19,90 € par mois en abonnement. Les animations plus élaborées, comme une scène GSAP épinglée, sont chiffrées sur devis selon les critères ci-dessus. Pour cadrer votre projet, consultez notre page création de site internet.

Ressources pour aller plus loin

• La documentation MDN sur animation-timeline, view() et scroll(), avec des démonstrations interactives.
• Le guide de Chrome for Developers consacré aux scroll-driven animations.
• La documentation officielle de GSAP et de ScrollTrigger, riche en exemples commentés.
• Le site Can I use, pour suivre la compatibilité des navigateurs propriété par propriété.

Questions fréquentes