Des animations au scroll sans tuer la perf

Les animations au scroll donnent du rythme à une page, mais mal faites elles la transforment en diaporama saccadé sur mobile. Ma première règle est simple : je n'anime que deux propriétés, transform et opacity. Ce sont les seules que le navigateur peut traiter sur le GPU sans recalculer la mise en page à chaque frame. Animer une hauteur, une marge ou la position « top » force un reflow coûteux qui se ressent immédiatement, surtout sur un téléphone d'entrée de gamme.

Ensuite, je déclenche les apparitions avec l'IntersectionObserver plutôt qu'en écoutant l'événement scroll. Écouter le scroll, c'est exécuter du code des dizaines de fois par seconde pour rien ; l'observateur ne réveille mon code que lorsqu'un élément entre réellement dans le viewport. Sur ce portfolio, c'est exactement ce que fait le composant Reveal : un fondu vers le haut, une seule fois, sans surveiller le défilement en continu. La page reste légère même avec beaucoup d'éléments animés.

Le détail qui change tout, c'est de respecter prefers-reduced-motion. Certains visiteurs désactivent les animations parce qu'elles leur donnent le vertige ou les déconcentrent — ce n'est pas un caprice, c'est un réglage d'accessibilité. Quand cette préférence est active, je rends le contenu immédiatement, sans aucun mouvement. Le site reste parfaitement utilisable ; il est juste plus calme. Ignorer ce signal, c'est exclure une partie de son audience pour un effet cosmétique.

Enfin, je m'impose de la sobriété. Tout ne doit pas bouger : si chaque bloc surgit, plus rien ne ressort et l'œil se fatigue. Je réserve l'animation aux moments qui guident la lecture — un titre qui s'installe, une section clé qui apparaît — et je laisse le reste tranquille. Une bonne animation se remarque à peine ; elle sert le contenu au lieu de réclamer l'attention. C'est cette retenue qui distingue un site premium d'un site qui en fait trop.