Motion en production : animations de layout et modèles accessibles
Framer-motion a changé. Depuis la fin de l'année 2024, le package s'appelle désormais Motion. Vous devez utiliser le chemin d'importation motion/react.
La plupart des tutoriels sont obsolètes. Ils affichent encore d'anciennes importations et manquent d'accessibilité. Ce guide vous aide à utiliser le Motion moderne dans des projets réels.
La mise à jour
La transition est simple. Si vous utilisez la version 11, le passage à la version 12 se résume à une opération de recherche et remplacement.
- Désinstaller :
npm uninstall framer-motion - Installer :
npm install motion - Mettre à jour les imports : Remplacez 'framer-motion' par 'motion/react'
Vous pouvez faire cohabiter les deux packages pendant une migration. Ne les laissez pas stagner dans votre base de code indéfiniment.
Animations de layout
La prop layout indique à Motion de surveiller la taille et la position d'un élément. Elle anime les changements au lieu de laisser le navigateur se repositionner brusquement.
Utilisez layout="position" pour les listes. Cela déplace les éléments frères lorsqu'un élément s'agrandit, sans écraser le contenu à l'intérieur.
Utilisez AnimatePresence pour le montage et le démontage (mounting/unmounting). Sans cela, React retire les éléments du DOM avant qu'ils ne puissent terminer leur animation de sortie.
Évitez d'animer height: auto. Cela provoque des bugs visuels. Utilisez plutôt un wrapper CSS grid (0fr à 1fr) pour des changements de hauteur fluides.
Accessibilité
Environ 30 % des utilisateurs d'iOS activent prefers-reduced-motion. Ne vous contentez pas de désactiver toutes les animations ; cela briserait votre mise en page.
La mauvaise méthode : Remplacer <motion.div> par un simple <div> si l'utilisateur souhaite moins de mouvement. Cela provoque un saut brutal de la mise en page, donnant une impression de dysfonctionnement.
La bonne méthode : Conditionnez la transition, pas le composant. Conservez le <motion.div>, mais réglez la durée (duration) sur 0.
Créez un hook personnalisé pour gérer cela :
- Utilisez le hook
useReducedMotion. - Si
true, retournez une durée de 0. - Si
false, retournez vos paramètres de ressort (spring) habituels.
Cela garantit que les éléments atteignent toujours leurs positions correctes, mais sans le mouvement.
Quand utiliser Motion
Utilisez l'API Web Animations du navigateur pour des fondus simples. Elle ne possède aucune dépendance.
Utilisez Motion lorsque vous avez besoin de :
- Des API React-native qui comprennent les cycles de vie des composants.
- Des animations de layout qui suivent les changements du DOM.
AnimatePresencepour les animations de sortie.- Une physique de ressort (
spring) qui semble naturelle.