Les layout animations de Framer Motion gèrent automatiquement les transitions lorsque le DOM change : réordonnancement de listes, redimensionnement, apparition/disparition. L'UX perçue s'améliore sans écrire des keyframes manuels.

La prop layout active les animations de layout (position, size). layoutId permet de faire « voyager » un élément d'un endroit à l'autre (ex. carte qui devient modale). Les variants orchestrent les animations d'une liste (stagger). Pour les listes triables, les grilles dynamiques et les modales qui s'ouvrent depuis une carte, Framer Motion Layout réduit le code et évite les saccades. Combiné aux gestures et au scroll, il fait de Framer Motion la référence pour les animations React.

Conseil : utiliser layoutId avec parcimonie (coût en perf sur de longues listes) et préférer layout pour les transitions de taille/position.

Points forts / Points faibles

Points forts

  • Transitions fluides sans keyframes manuels
  • layoutId pour des transitions « partagées » (shared element)
  • API déclarative et lisible
  • Performances correctes avec will-change et GPU

Points faibles

  • Bundle non négligeable pour des projets très légers
  • layoutId coûteux sur des listes très longues
  • Dépendance à React