Configurer des animations liées au défilement

Les animations liées au défilement se jouent, se mettent en pause ou s’inversent selon la visibilité de l’élément. Exemples : l’apparition progressive d’une bannière lorsque vous faites défiler une section jusqu’à la rendre visible, un nombre qui augmente lorsqu’il devient visible, ou un effet de parallaxe lié à la position de défilement. IntersectionObserver déclenche les animations ; CSS ou l’API Web Animations les exécute.

Le modèle le plus simple consiste à ajouter, lorsqu’un élément entre dans la fenêtre d’affichage, une classe CSS qui contient l’animation. Dans la fonction de rappel de l’observer, utilisez entry.target.classList.add("in-view") ; la classe définit animation: fade-in 600ms forwards.

Créez un observer partagé, appelez observe pour chaque élément possédant la classe de déclenchement, ajoutez « in-view » lors de l’intersection, puis appelez unobserve pour éviter de relancer l’animation. Pour les animations exécutées une seule fois, cela suffit ; pour les animations qui se répètent lors d’une nouvelle entrée dans la fenêtre d’affichage, n’appelez pas unobserve et retirez la classe à la sortie.

Pour révéler séquentiellement les éléments d’une liste, appliquez à chacun un délai différent à l’aide d’une propriété personnalisée CSS : style="--delay: ${i * 100}ms" ; l’animation lit animation-delay: var(--delay). Les éléments s’animent en cascade lorsque la liste entre dans la fenêtre d’affichage.

threshold: 0.2 se déclenche lorsque 20 % de l’élément est visible : c’est généralement un bon moment pour les animations « in-view ». threshold: 0 se déclenche trop tôt, dès qu’un pixel est visible, et le résultat paraît brusque ; threshold: 1 se déclenche trop tard, lorsque l’élément est entièrement visible, et donne une impression de retard.

Les animations déclenchées par le défilement se jouent une fois lors de l’intersection, comme expliqué précédemment. Les animations liées au défilement font progresser leur animation au même rythme que la position de défilement. La méthode moderne repose sur les animations CSS pilotées par le défilement (animation-timeline: scroll()), tandis qu’IntersectionObserver reste utile pour détecter l’entrée dans des zones de déclenchement et la sortie de celles-ci.

Animez les propriétés que le GPU peut transformer efficacement : transform et opacity. Évitez d’animer top, left, width et height : ces propriétés déclenchent une mise en page à chaque image, ce qui fait saccader les animations liées au défilement sur les appareils de gamme intermédiaire.

Placez les déclarations d’animation dans @media (prefers-reduced-motion: no-preference) afin que les personnes qui demandent une réduction des animations, notamment en raison de troubles vestibulaires ou d’une sensibilité particulière, obtiennent l’état final statique sans mouvement. Les animations décoratives doivent être entièrement désactivées lorsque la réduction des animations est activée.

Utilisez un seul observer partagé, et non un observer par élément. Appelez unobserve lorsqu’une animation exécutée une seule fois s’est déclenchée. Utilisez will-change avec parcimonie : uniquement sur les éléments qui s’animent actuellement, puis retirez-le lorsque l’animation se termine. Surveillez le panneau des performances pour repérer les images perdues.

Pour les animations qui doivent s’inverser lorsque l’élément quitte la fenêtre d’affichage, n’appelez pas unobserve. Dans la fonction de rappel, utilisez toggle pour activer ou désactiver la classe selon isIntersecting : entry.target.classList.toggle("in-view", entry.isIntersecting). L’animation avance lors de l’entrée et s’inverse lors de la sortie.

Pour les animations pilotées par JS, remplacez classList.add par entry.target.animate(keyframes, options). WAAPI renvoie un objet Animation que vous pouvez mettre en pause, inverser ou enchaîner à l’aide de promesses : cette solution est plus flexible que CSS pour les séquences complexes.

Pourquoi est-il préférable d’animer transform et opacity plutôt que top, left, width et height dans les animations liées au défilement ?

Les animations liées au défilement combinent IntersectionObserver avec des classes d’animation CSS ou WAAPI. Définissez un état masqué, ajoutez « in-view » lors de l’intersection, animez transform et opacity, plutôt que top et left, respectez prefers-reduced-motion, puis créez des décalages à l’aide de propriétés personnalisées CSS pour obtenir des apparitions en cascade. Pour les animations qui suivent entièrement la progression du défilement, envisagez les animations natives pilotées par le défilement (animation-timeline: scroll()).