Framer Motion : animations React avancées
Guide complet Framer Motion : animations, transitions, gestures et layout animations pour React avec exemples.
Framer Motion est la librairie d'animation de reference pour React, offrant une API declarative qui simplifie la creation d'animations complexes sans manipuler directement les keyframes CSS ou requestAnimationFrame. Avec plus de 3 millions de telechargements hebdomadaires sur npm, elle s'est imposee comme le standard pour les interfaces animees en React.
La puissance de Framer Motion reside dans son approche composant-first : chaque element animable est encapsule dans un composant motion (motion.div, motion.span, motion.svg) qui expose des props comme animate, initial, exit et transition. Le moteur d'animation sous-jacent gere automatiquement l'interpolation, les courbes d'acceleration et la synchronisation.
Ce guide explore les fonctionnalites avancees de Framer Motion, des variants pour orchestrer des animations complexes aux animations de layout qui gerent automatiquement les transitions de position et de taille. Chaque concept est illustre avec des exemples pratiques directement applicables dans vos projets Next.js.
1. Composants motion et proprietes de base
Les composants motion transforment n'importe quel element HTML en element animable. La prop initial definit l'etat de depart ({opacity: 0, y: 20}), animate definit l'etat final ({opacity: 1, y: 0}) et transition controle la duree, le delai et le type d'easing. Framer Motion interpole automatiquement entre les deux etats en calculant les valeurs intermediaires a chaque frame.
La prop transition accepte un objet avec type ('spring', 'tween', 'inertia'), duration en secondes, delay, et des parametres specifiques a chaque type. Les animations spring sont definies par stiffness (raideur), damping (amortissement) et mass, offrant un rendu physiquement realiste sans avoir a specifier de duree. Le type tween utilise des courbes de Bezier classiques comme ease, easeInOut ou des valeurs personnalisees.
Les props whileHover, whileTap et whileFocus declenchent des animations interactives sans necessiter de gestion d'etat manuelle. Par exemple, whileHover={{scale: 1.05}} agrandit l'element au survol et revient automatiquement a sa taille initiale. Ces props se combinent naturellement avec les autres proprietes d'animation pour creer des interactions riches et reactives.
2. Variants et orchestration d'animations
Les variants permettent de definir des etats d'animation nommes et de les propager automatiquement aux composants enfants. On declare un objet variants avec des cles comme 'hidden' et 'visible', puis on passe le nom de l'etat courant via la prop animate. Le parent propage automatiquement son etat a tous ses enfants motion, creant des animations coordonnees sans prop drilling.
L'orchestration des animations enfants se configure via les proprietes staggerChildren, delayChildren et when dans la transition du variant parent. staggerChildren: 0.1 ajoute un delai incremental de 100ms entre chaque enfant, creant un effet de cascade elegant. La propriete when: 'beforeChildren' garantit que l'animation du parent se termine avant que les enfants ne commencent.
Les variants dynamiques acceptent une fonction au lieu d'un objet, recevant un parametre custom passe via la prop custom du composant. Cela permet de calculer des valeurs d'animation basees sur l'index de l'element, sa position dans la liste ou toute autre donnee dynamique, offrant une flexibilite comparable a celle des animations procedurales tout en conservant la simplicite declarative de l'API.
3. AnimatePresence et animations de sortie
AnimatePresence est le composant qui rend possibles les animations de sortie (unmount) en React, un probleme historiquement difficile car React supprime immediatement les elements du DOM. En encapsulant vos composants conditionnels dans AnimatePresence, Framer Motion retarde la suppression DOM jusqu'a la fin de l'animation exit, definie par la prop exit sur les composants motion enfants.
Chaque enfant direct d'AnimatePresence doit posseder une prop key unique pour que Framer Motion puisse suivre les elements entrants et sortants. La prop mode controle le comportement : 'sync' anime entree et sortie simultanement, 'wait' attend la fin de la sortie avant de commencer l'entree, et 'popLayout' utilise FLIP pour des transitions de layout fluides.
Les animations de page dans Next.js s'implementent en encapsulant le composant children du layout avec AnimatePresence et en ajoutant des props initial, animate et exit a chaque page. L'utilisation du pathname comme key declenche automatiquement l'animation de sortie de l'ancienne page et l'animation d'entree de la nouvelle page lors de chaque navigation.
Besoin d’aide en Technologie ?
Nos experts vous accompagnent. Recevez 3 devis gratuits sous 24h.
Gratuit · Sans engagement · Reponse sous 24h
4. Animations de scroll et de layout
Le hook useScroll retourne quatre valeurs MotionValue (scrollX, scrollY, scrollXProgress, scrollYProgress) qui representent la position de scroll en pixels et en pourcentage. Combine avec useTransform, on peut mapper la progression du scroll a n'importe quelle propriete CSS : opacity, scale, rotate, x, y, backgroundColor. Ces transformations sont calculees sur le GPU sans declencher de re-render React.
La prop whileInView declenche une animation lorsqu'un element entre dans le viewport, remplacant avantageusement IntersectionObserver pour les cas d'usage simples. Les options viewport={{once: true, amount: 0.5}} permettent de declencher l'animation une seule fois et de specifier le seuil de visibilite. Combine avec des variants, whileInView permet de creer des animations de reveal au scroll elegantes avec tres peu de code.
Les animations de layout sont la fonctionnalite la plus impressionnante de Framer Motion : en ajoutant simplement la prop layout a un composant motion, toute modification de sa position ou de sa taille dans le DOM est automatiquement animee avec une transition FLIP. LayoutGroup synchronise les animations entre des composants non-parents, permettant des transitions fluides entre des listes, des grilles et des vues de detail.
5. Gestes et drag avance
La prop drag active le glisser-deposer natif avec inertie physique. drag='x' contraint le mouvement a l'axe horizontal, tandis que dragConstraints definit les limites via un objet {top, right, bottom, left} ou une ref vers un element conteneur. La prop dragElastic controle le comportement elastique aux limites (0 pour rigide, 1 pour totalement elastique) et dragMomentum active ou desactive l'inertie apres le relachement.
Les evenements onDragStart, onDrag et onDragEnd fournissent l'objet event et un objet info contenant point (position absolue), delta (deplacement depuis le dernier frame), offset (deplacement total) et velocity. Ces donnees permettent d'implementer des interactions avancees comme le swipe-to-dismiss, les carrousels a inertie ou les interfaces de type Tinder avec seuil de decision base sur la velocity.
La prop dragTransition configure les parametres physiques de l'inertie post-relachement : bounceStiffness, bounceDamping et power controlent le comportement du rebond aux limites et la deceleration. Pour un controle total, onDragEnd combine avec animate() (la fonction imperative) permet de declencher des animations snap-to-grid ou des transitions conditionnelles basees sur la position et la velocite au moment du relachement.
Questions frequentes
Framer Motion impacte-t-il les performances de mon application React ?
Framer Motion utilise des MotionValues qui mettent a jour le DOM directement sans provoquer de re-renders React, ce qui le rend tres performant. Les animations de transform et opacity sont executees sur le GPU. Pour les listes longues, utilisez LazyMotion avec loadFeatures pour reduire le bundle de 35 Ko a moins de 5 Ko.
Comment utiliser Framer Motion avec les Server Components de Next.js ?
Les composants motion necessitent le directive 'use client' car ils utilisent des hooks React. La strategie recommandee est de creer des composants wrapper clients legers (MotionDiv, AnimatedSection) qui encapsulent la logique d'animation et sont importes dans les Server Components pour preserver le rendu serveur du contenu statique.
Quelle est la difference entre animate et motion.animate ?
La prop animate est declarative et reagit aux changements de state React. La fonction animate() importee depuis framer-motion est imperative et controle les animations programmatiquement, utile pour les sequences complexes, les animations declenchees par des evenements non-React ou les timelines multi-etapes avec await.
Comment animer le changement de route dans Next.js App Router ?
Encapsulez le children du layout.tsx avec AnimatePresence en utilisant le pathname (via usePathname) comme key. Chaque page definit ses animations via initial, animate et exit. Notez que le App Router de Next.js ne supporte pas nativement les animations de sortie de page sans solution complementaire cote client.
Framer Motion ou CSS animations : quand utiliser chacun ?
Les CSS animations suffisent pour les transitions simples (hover, focus, apparition). Framer Motion excelle pour les animations basees sur la physique (spring), les animations de layout, les gestes (drag), les animations conditionnelles liees a l'etat React et les animations de sortie qui necessitent AnimatePresence.
Guides complementaires
Next.js 14 : guide complet du App Router en français
Guide complet du App Router Next.js 14 en français : layouts, server components, data fetching et déploiement.
TechnologieTailwind CSS : guide complet et bonnes pratiques 2025
Guide complet Tailwind CSS : configuration, responsive design, dark mode, composants réutilisables et bonnes pratiques.
TechnologieAPI REST vs GraphQL : quel choix pour votre projet
Comparatif détaillé REST vs GraphQL : performances, flexibilité, sécurité et cas d'usage pour choisir votre API.
Outils gratuits recommandes
Lancez votre projet technologie
500+ experts verifies prets a vous accompagner. Devis gratuit sous 24h.