Pourquoi Framer Motion ?
Framer Motion est la bibliothèque d'animation de référence pour React. Elle offre une API déclarative intuitive, des performances optimisées (GPU accelerated) et une intégration parfaite avec l'écosystème React.
Animation de base
L'animation la plus simple utilise initial, animate et transition :
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
Contenu animé
</motion.div>Variants pour les animations complexes
Les variants permettent de définir des états d'animation nommés et de les orchestrer entre parent et enfants, créant des animations de liste en cascade très facilement.
AnimatePresence
AnimatePresence permet d'animer les composants lors de leur suppression du DOM, indispensable pour les transitions de pages et les modales avec animation de fermeture.
Layout Animations
La prop layout anime automatiquement les changements de position et de taille d'un élément. C'est parfait pour les listes réorganisables, les filtres et les accordéons.
Gestures : Drag et Hover
Framer Motion intègre des gestures natives : whileHover, whileTap, drag et whileDrag. Ces interactions améliorent considérablement l'expérience utilisateur avec un code minimal.
Conclusion
Framer Motion transforme des interfaces statiques en expériences interactives mémorables. La qualité des animations contribue directement à la perception de qualité d'une application. C'est un investissement UX qui distingue les produits professionnels.