Animations Framer Motion : donner vie à vos composants React

Le mouvement comme langage d'interface

L'animation dans une interface n'est pas un ornement que l'on ajoute en fin de projet pour impressionner un client. C'est un langage fonctionnel qui communique les relations entre les éléments, signale les changements d'état et crée un sentiment de continuité spatiale dans la navigation. Un bouton qui réagit au survol, une liste qui se réordonne fluidement, une modale qui émerge de l'élément qui l'a déclenchée — chaque mouvement porte un sens que l'utilisateur décode inconsciemment.

Framer Motion, récemment rebaptisé Motion et disponible sur motion.dev en version 11.x, est devenu la référence pour l'animation en React. La bibliothèque a élargi son champ pour supporter également Vue et le JavaScript vanilla, mais c'est dans l'écosystème React qu'elle brille le plus. Après l'avoir intégrée dans des dizaines de projets professionnels, des portfolios aux applications SaaS complexes, je partage ici les patterns qui produisent des interfaces vivantes sans sacrifier la performance.

Ce qui distingue Motion des approches CSS pures ou de bibliothèques comme GSAP, c'est son intégration profonde avec le modèle déclaratif de React. On décrit des états visuels, pas des séquences d'animation. Le framework calcule les transitions optimales entre ces états, ce qui produit un code plus lisible, plus maintenable et plus naturel.

Les fondamentaux : motion components, variants et AnimatePresence

Le point d'entrée de Motion est le motion component. Un motion.div, motion.span ou motion.button transforme n'importe quel élément HTML en élément animable. Les props initial, animate et exit définissent respectivement l'état de départ, l'état cible et l'état de sortie. Cette API déclarative est intuitive pour les designers qui pensent en termes d'états visuels. Par exemple, un simple motion.div avec initial={{ opacity: 0, y: 20 }} et animate={{ opacity: 1, y: 0 }} crée une apparition en fondu avec un léger glissement vers le haut.

Les variants sont le mécanisme qui rend les animations complexes gérables à grande échelle. On définit des états nommés — hidden, visible, hover, pressed — dans un objet séparé du composant, et ces états se propagent automatiquement aux enfants. Le staggerChildren permet d'échelonner l'animation des éléments enfants avec un délai configurable, créant des effets de cascade élégants sans logique de timing manuelle. Je centralise toutes les variants du projet dans un fichier dédié, créant un vocabulaire de mouvement cohérent et réutilisable.

AnimatePresence est le composant qui gère les animations de montage et de démontage. En React, quand un composant est retiré du DOM, il disparaît instantanément. AnimatePresence intercepte ce retrait et joue l'animation de sortie définie par le prop exit avant de supprimer l'élément. C'est indispensable pour les modales, les notifications, les transitions de page et tout élément dont la disparition mérite d'être animée.

Layout animations et shared element transitions

Les layout animations sont la fonctionnalité la plus spectaculaire de Motion. En ajoutant un simple prop layout à un composant, le framework anime automatiquement tout changement de position ou de dimension dans le DOM. Un filtre qui réordonne une grille de cartes, un panneau latéral qui s'ouvre et repousse le contenu, un élément qui passe d'une liste à un affichage en grille — tout est animé fluidement grâce à la technique FLIP (First, Last, Invert, Play) que Motion applique automatiquement sous le capot.

La prop layoutId pousse ce concept encore plus loin en permettant les shared element transitions entre des composants totalement indépendants. Attribuez le même layoutId à une miniature dans une grille et à l'image dans une vue de détail : quand l'utilisateur navigue de l'un à l'autre, Motion anime la transformation entre les deux états de manière fluide. C'est le type de transition que l'on voit dans les applications mobiles natives et qui était extrêmement complexe à implémenter sur le web avant Motion.

Le composant LayoutGroup permet de regrouper les calculs de layout pour éviter les conflits entre animations simultanées. Quand plusieurs éléments animés coexistent dans la même zone, LayoutGroup coordonne leurs recalculs pour garantir une exécution fluide. C'est un détail d'implémentation qui fait la différence entre une animation professionnelle et une animation qui saccade.

Spring physics, gestes et scroll-based animations

Motion utilise par défaut des animations à base de ressorts physiques (spring) plutôt que des courbes de bézier. Les paramètres stiffness, damping et mass simulent un comportement physique réaliste que le cerveau humain perçoit comme naturel. Une masse faible avec un amortissement élevé produit une micro-interaction rapide et précise. Une masse élevée avec un amortissement faible crée un rebond ludique. Ces paramètres physiques sont plus intuitifs que des durées en millisecondes et des courbes cubiques.

Le système de gestes intégré — whileHover, whileTap, whileDrag, whileFocus, whileInView — permet de créer des interactions tactiles sophistiquées de manière déclarative. Un carrousel draggable avec inertie se construit en quelques lignes grâce aux drag constraints et au momentum naturel du système physique. Le hook useScroll expose la progression du scroll via scrollYProgress, ce qui permet de créer des animations liées au défilement : barres de progression, effets de parallaxe, révélations progressives.

Les animations SVG méritent une mention particulière. Motion peut animer l'attribut d du path SVG, ce qui permet des morphings de forme fluides. La prop pathLength permet de créer des animations de dessin progressif où une forme SVG semble se tracer en temps réel. Ces techniques sont particulièrement efficaces pour les icônes animées, les illustrations interactives et les indicateurs de chargement.

Alternatives CSS natives et comparaison avec l'écosystème

Le paysage de l'animation web ne se limite pas à Motion. La View Transitions API, disponible dans Chrome depuis la version 111 et dans Safari depuis la version 18, offre des transitions de page natives sans JavaScript. Les transitions same-document sont bien supportées, et les cross-document transitions arrivent avec Chrome 126. Les pseudo-elements ::view-transition permettent un contrôle CSS fin sur chaque élément en transition. Pour des transitions de navigation simples, cette API native peut suffire.

La règle CSS @starting-style, supportée depuis Chrome 117, Safari 17.5 et Firefox 129, permet de définir des animations d'entrée sans aucun JavaScript. Combinée avec les transitions CSS classiques, elle couvre une part significative des cas d'usage d'animation de base. React Spring propose un modèle physique similaire à celui de Motion via @react-spring/web, mais avec un écosystème de fonctionnalités moins complet. Pour les projets qui ne sont pas en React, @formkit/auto-animate ajoute des animations avec une seule ligne de code.

Mon critère de choix est la complexité. Pour des survols et des transitions simples, le CSS natif suffit et offre la meilleure performance. Pour des animations de layout, des gestes et des orchestrations complexes, Motion est imbattable en termes de ratio effort-résultat. Pour des animations cinématographiques avec des timelines précises, GSAP reste la référence. Dans la pratique, je combine souvent les trois approches dans un même projet, en utilisant chaque outil là où il excelle.

Performance et bonnes pratiques en production

Motion anime par défaut les propriétés transform et opacity, les deux seules propriétés CSS qui ne déclenchent pas de reflow et bénéficient de l'accélération GPU. Les layout animations nécessitent cependant une lecture du DOM pour calculer les changements de position, ce qui peut poser des problèmes de performance avec de nombreux éléments animés simultanément. J'utilise le prop layout avec parcimonie et je regroupe les éléments concernés dans un LayoutGroup pour optimiser les recalculs.

Le hook useReducedMotion permet de respecter la préférence d'accessibilité prefers-reduced-motion définie dans le système d'exploitation de l'utilisateur. Je l'intègre systématiquement pour désactiver ou simplifier les animations pour les personnes sensibles au mouvement. Un bouton animé qui revient à une transition instantanée reste parfaitement fonctionnel. L'accessibilité n'est pas une option, c'est une exigence professionnelle.

Ma règle d'or en matière d'animation est fonctionnelle : si un mouvement ne rend pas l'interface plus compréhensible ou plus agréable, il n'a pas sa place. Chaque animation doit avoir une justification — guider l'attention, communiquer un changement d'état, créer une continuité spatiale, fournir un feedback tactile. Une animation qui n'existe que pour être remarquée est une animation de trop. La retenue est le signe d'une maîtrise professionnelle.