Un écran vide, c’est la première chose que voit un visiteur pendant le chargement du site. Il pourrait pourtant voir des blocs de contenu apparaître de manière fluide.

L’animation déclenchée au défilement n’est plus un simple élément décoratif. Elle oriente l’attention, donne le rythme de lecture et fait vivre les pages d’atterrissage. Mais choisir un outil au hasard, c’est risquer des problèmes de performance et des mises en page cassées sur mobile.

Voici trois approches opérationnelles pour l’animation au défilement en 2026, du JavaScript natif sans aucune dépendance jusqu’aux bibliothèques prêtes à l’emploi proposant des dizaines d’effets. En bonus, nous décortiquons le défaut rédhibitoire de Revealator, un plugin autrefois populaire mais resté bloqué en 2020.

💡 Aperçu rapide:

• Vous comprendrez comment l’Intersection Observer API permet de créer des animations de révélation sans jQuery ni bibliothèque tierce
• Vous explorerez AOS, la bibliothèque la plus populaire (28 000 étoiles sur GitHub), ses classes, ses attributs et sa configuration en 5 minutes
• Vous comparerez ScrollReveal et AOS selon la courbe d’apprentissage, le poids du bundle et la flexibilité
• Vous découvrirez pourquoi Revealator ne peut plus être utilisé sur de nouveaux projets
• Vous obtiendrez un tableau comparatif et un choix clair pour votre besoin

Intersection Observer API, une approche native sans dépendances

Une API navigateur qui suit le moment où un élément entre dans la zone d’affichage. Pas de jQuery, pas de polyfills pour les navigateurs modernes. La prise en charge atteint plus de 97% de l’audience mondiale selon Can I Use.

Le principe est simple: vous créez un observateur, vous l’attachez aux éléments cibles et vous recevez une fonction de rappel quand un élément entre dans la zone visible. À ce moment-là, vous ajoutez une classe CSS avec l’animation.

1
const observer = new IntersectionObserver((entries) => {
2
  entries.forEach(entry => {
3
    if (entry.isIntersecting) {
4
      entry.target.classList.add('visible');
5
    }
6
  });
7
}, { threshold: 0.1 });
8
 
9
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

Le code ci-dessus suit tous les éléments ayant la classe .reveal. Quand un élément entre dans la zone d’affichage (la valeur threshold est définie dans le code), l’animation se déclenche. Vous définissez vous-même le CSS correspondant, avec les @keyframes de votre choix.

1
.reveal {
2
  opacity: 0;
3
  transform: translateY(30px);
4
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
5
}
6
 
7
.reveal.visible {
8
  opacity: 1;
9
  transform: translateY(0);
10
}

Avantages de l’approche: zéro dépendance, aucune augmentation du bundle, contrôle total sur les déclencheurs et l’animation CSS. Convient aux projets où chaque kilo-octet compte et où la performance sur les appareils peu puissants est critique.

Inconvénients: vous devez écrire votre propre enveloppe pour la répétition, les délais et les animations en cascade. Les bibliothèques le font directement.

Pour un projet en JS pur avec des exigences de vitesse élevées, optez pour Intersection Observer. Si vous ne voulez pas écrire l’enveloppe manuellement, regardez du côté d’AOS.

AOS (Animate on Scroll), une bibliothèque aux 28 000 étoiles

AOS est le standard de fait pour les animations au défilement en développement web. Le dépôt GitHub compte plus de 28 000 étoiles et 2 600 forks. La bibliothèque est si simple que la configuration prend exactement deux minutes.

Connectez le CSS et le JS, via CDN ou npm:

1
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
2
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
3
<script>AOS.init();</script>

Ensuite, tout élément avec un attribut data-aos prend vie au défilement:

1
<div data-aos="fade-up">Этот блок выплывет снизу</div>
2
<div data-aos="zoom-in" data-aos-delay="300">Этот — с задержкой 300 мс</div>

Il existe plus de 30 effets intégrés: fondu, retournement, zoom, glissement dans toutes les directions. Vous contrôlez la durée (data-aos-duration), le délai (data-aos-delay), le décalage (data-aos-offset) et même l’ancre (data-aos-anchor), lorsque l’animation d’un élément est liée à l’apparition d’un autre.

Avantages:

• Configuration en 5 minutes, trois lignes de code et des attributs data
• Plus de 30 fonctions d’accélération intégrées, animations en cascade et par ancre
• Dépôt actif, les bugs sont corrigés, les tickets n’ont aucun retard

Inconvénients:

• Dépendance vis-à-vis de l’auteur: le projet est vivant mais les mises à jour sont peu fréquentes (la dernière version est la 2.3.1)
• Approche purement CSS: pas de logique programmatique (animations conditionnelles, paramètres dynamiques)

Utilisez AOS quand: vous avez besoin de rapidité de développement, de plus de 30 effets prêts à l’emploi, d’animation sur une page d’atterrissage classique avec une dizaine de blocs.

ScrollReveal, une alternative orientée JavaScript

ScrollReveal est une bibliothèque de la même catégorie avec plus de 22 000 étoiles sur GitHub. Contrairement à AOS, elle se pilote depuis le JavaScript, pas via des attributs data.

1
ScrollReveal().reveal('.block', {
2
  delay: 200,
3
  distance: '50px',
4
  origin: 'bottom',
5
  duration: 600,
6
  reset: true
7
});

Différence clé par rapport à AOS: une API complète en JS. Vous modifiez les paramètres d’animation de manière programmatique, vous les chargez depuis le serveur, vous les liez à des conditions. Pour une logique complexe, cela répond au besoin.

Avantages:

• Contrôle JS: vous pouvez gérer l’animation depuis n’importe où dans le code
• reset: true, animation répétée lors du défilement vers le haut puis vers le bas
• Prise en charge des sélecteurs CSS de toute complexité

Inconvénients:

• Courbe d’apprentissage légèrement plus raide que pour AOS, pas d’approche visuelle par attributs data
• Moins de fonctions d’accélération intégrées

Le choix entre AOS et ScrollReveal se résume à une chose: attributs data ou JavaScript. Pour une page d’atterrissage classique, choisissez AOS. Pour une SPA où l’animation fait partie de la logique métier, choisissez ScrollReveal.

Revealator: une note historique

Revealator est un plugin jQuery de QODIO qui, en 2016-2018, constituait une solution simple pour animer des blocs: vous attachiez des classes comme revealator-fade, revealator-slideup et revealator-zoomout, et les éléments apparaissaient au défilement. La page de démonstration sur jQueryScript fonctionne encore, vous pouvez voir les effets.

Le problème est que le dépôt GitHub a été archivé en avril 2023 avec la mention «DEPRECATED, no longer actively maintained». Le dernier commit significatif date de décembre 2020. Le plugin tire jQuery comme dépendance dans un monde où 97% des sites n’utilisent plus jQuery pour les nouvelles fonctionnalités. Il n’y a pas de support, les bugs ne sont pas corrigés, les API navigateur modernes ne sont pas utilisées.

N’utilisez pas Revealator sur de nouveaux projets. Si vous le trouvez dans une ancienne base de code, migrez vers Intersection Observer ou AOS. La tâche est la même, mais la performance et la maintenabilité sont d’un ordre de grandeur supérieur.

Comparaison des approches

Pour une page d’atterrissage rapide, AOS suffit. Pour une SPA avec contrôle programmatique, ScrollReveal. Pour un projet avec des exigences de performance strictes et une tolérance zéro aux dépendances, Intersection Observer pur. Revealator n’est pas dans la course.

Regardez l’analyse de 6 minutes par Kevin Powell, il montre une animation de révélation au défilement avec du CSS pur et Intersection Observer, sans aucune bibliothèque.

⁉️🤔 Questions fréquentes

Pourquoi utiliser une animation de révélation sur une page d’atterrissage, cela ne ralentit-il pas le site?

Une animation correctement réalisée ne ralentit rien. Intersection Observer fonctionne de manière asynchrone en dehors du thread principal, les animations CSS sont rendues sur le GPU via transform et opacity, aucun repaint n’est déclenché. Les problèmes commencent quand vous animez width, height ou left/top, ce qui secoue la mise en page. Les bibliothèques comme AOS n’animent que transform et opacity. La règle principale est de ne pas animer la géométrie.

Peut-on utiliser AOS sur un site avec un framework JS lourd, React ou Vue?

Vous pouvez, mais avec une nuance: AOS scanne le DOM à l’initialisation et ne voit pas les éléments ajoutés de manière réactive après AOS.init(). La solution consiste à appeler AOS.refresh() après le montage du composant. Dans React, c’est useEffect, dans Vue, mounted. Pour une intégration poussée avec l’état, ScrollReveal est plus pratique puisqu’il se gère entièrement depuis le JS.

En quoi Intersection Observer est-il meilleur que l’ancienne approche avec les événements scroll de jQuery?

L’approche jQuery attache un écouteur sur scroll, l’événement se déclenche des dizaines de fois par seconde, chaque appel lit la géométrie de l’élément (provoque un reflow), le site rame. Intersection Observer fonctionne de manière asynchrone, la fonction de rappel est invoquée une seule fois lors du changement effectif de visibilité. Sur une page avec 50 blocs animés, la différence de performance est d’environ 40 fois en faveur d’Observer, selon les tests des développeurs WebKit.

Que faire si l’animation saccade sur mobile?

D’abord, vérifiez que vous n’animez que transform et opacity. Ensuite, ajoutez will-change: transform, opacity à l’élément avant le début de l’animation et retirez-le après. Troisièmement, sur les appareils peu puissants, réduisez la duration à 200-300 ms: une animation rapide est perçue comme plus fluide qu’une animation lente et saccadée. Sur les appareils avec un taux de rafraîchissement d’écran de 60 Hz, une animation de moins de 300 ms n’a pas le temps de fatiguer l’œil.

Peut-on créer une animation de révélation sans aucun JavaScript?

Partiellement, via les CSS Scroll-driven Animations, mais la spécification est encore expérimentale: elle fonctionne dans Chrome 115+, mais pas dans Firefox ni Safari. Pour la production, vous avez besoin soit d’Intersection Observer (natif, sans bibliothèque), soit d’un polyfill. Pour un site en production en 2026, l’option minimale est Intersection Observer sans bibliothèque: JS natif, zéro dépendance, prise en charge complète.

Quelle approche choisir pour une page d’atterrissage en 2026

Si vous réalisez une page d’atterrissage classique avec 5 à 10 blocs et un délai intenable, AOS. Trois lignes de code, 30 effets, difficile de se tromper.

S’il s’agit d’une SPA sous React/Vue et que l’animation est liée à la logique métier, ScrollReveal. Le contrôle programmatique compense les 5 minutes de configuration supplémentaires.

Si le budget performance est strict et que le designer a dessiné des animations uniques, Intersection Observer. Zéro kilo-octet, contrôle total du CSS, vitesse maximale.

N’utilisez pas Revealator. Le plugin était bon en 2016, mais le monde a évolué.

Essayez AOS sur une page de test, npm install aos --save ou CDN en 5 minutes. Sentez la différence entre une page d’atterrissage statique et une page où les blocs prennent vie au défilement. Écrivez dans les commentaires quelle approche vous avez choisie et pourquoi.