25 exemples Framer Motion (Motion for React) qui tournent en direct : fondus, stagger, layout, éléments partagés, modals, accordéons, drag, progression au scroll, transitions de page et réduction des animations.
Framer Motion, désormais publié sous le nom Motion for React, anime tout élément que vous remplacez par un composant motion : définissez les props initial, animate et transition. Les 25 recettes ci-dessous tournent en direct sur cette page, chacune avec du code à copier : entrées, stagger, drag, layout et éléments partagés, animations de sortie, progression au scroll, transitions de page et réduction des animations.
Installation
Chaque démo ici est le code affiché à côté, exécuté dans votre navigateur. Les recettes utilisent le paquet motion ; si votre projet utilise encore framer-motion, les composants et les props sont identiques et seul le chemin d'import change.
Oui. La bibliothèque a été renommée Motion et la partie React s'importe depuis motion/react. Le paquet framer-motion est toujours publié avec la même API, donc les anciens tutoriels fonctionnent encore.
L'élément doit être un enfant direct de AnimatePresence, avoir une key unique et une prop exit. Si le parent de AnimatePresence est aussi retiré, il ne reste rien à animer.
Animez height de 0 à "auto" sur un élément motion et définissez overflow à hidden. Motion mesure la vraie hauteur pour vous, ce que les transitions CSS ne savent pas faire.
Les composants motion utilisent des API du navigateur, le fichier qui les affiche a donc besoin de "use client". Un composant serveur peut tout de même afficher ce composant client et lui passer des enfants.
Pas si vous vous limitez aux transformations et à l'opacité, qui s'exécutent sans recalcul de mise en page. Les grandes animations de layout et les nombreux éléments simultanés coûtent plus cher ; testez sur un téléphone milieu de gamme et utilisez LazyMotion pour alléger le bundle.
Props et hooks utilisés sur cette page
initial est la première frame, animate est l'état final. Rien d'autre n'est nécessaire pour une entrée ponctuelle.
Se déplacer avec y utilise une transformation CSS, l'élément ne pousse donc jamais ses voisins pendant son trajet.
Les variants sont des états nommés. Le parent transmet son état et staggerChildren retarde chaque enfant un peu plus que le précédent.
whileInView lance l'animation quand l'élément entre dans le viewport ; once: true l'empêche de se rejouer à chaque scroll.
Un tableau est une liste de keyframes. times les répartit sur la durée, de 0 à 1.
whileHover et whileTap animent vers un état tant que le geste dure, puis reviennent d'eux-mêmes.
dragConstraints peut recevoir une ref vers un élément parent, l'élément ne peut donc jamais être déplacé en dehors.
Déplacez sur un seul axe, puis lisez le décalage et la vitesse dans onDragEnd pour décider si la carte part ou revient en place.
Reorder.Group garde le tableau dans le state et vous transmet le nouvel ordre. Chaque Reorder.Item a besoin de la valeur qu'il représente.
Animer x à travers quelques keyframes donne la secousse bien connue. Déclenchez-la en changeant une key ou en appelant animate depuis useAnimate.
Ajoutez layout et modifiez la taille ou la position avec du CSS ordinaire. Motion mesure avant et après et anime la différence avec des transformations.
Deux éléments avec le même layoutId sont traités comme un seul. Quand le soulignement s'affiche sous un nouvel onglet, il y glisse.
React retire les éléments immédiatement. Les envelopper dans AnimatePresence garde un enfant sortant monté jusqu'à la fin de son animation de sortie.
L'arrière-plan et le panneau apparaissent en fondu ensemble ; le panneau monte aussi. Gardez la vraie sémantique de dialogue (role, focus, Escape) dans votre propre code.
Motion peut animer vers height: "auto", ce que les transitions CSS simples ne peuvent pas faire. overflow hidden empêche le texte de déborder pendant l'ouverture.
layout sur chaque notification permet aux autres de remonter en douceur quand l'une disparaît. popLayout fait que la notification sortante cesse immédiatement d'occuper de la place.
mode="wait" laisse l'ancienne page finir de sortir avant que la nouvelle n'entre. La key doit changer avec la route.
useScroll fournit scrollYProgress de 0 à 1. Passez container pour suivre une boîte qui défile plutôt que la fenêtre, et redimensionnez la barre avec.
useTransform fait correspondre une motion value à une autre plage, pour qu'un calque se déplace à une vitesse différente du scroll.
animate() peut piloter une motion value. useTransform l'arrondit, et afficher directement la motion value évite un rendu React à chaque frame.
pathLength va de 0 à 1 sur n'importe quel path, circle ou line, c'est le moyen le plus rapide de tracer une coche ou une signature.
repeat: Infinity avec un easing linéaire donne une rotation régulière. Associez-le à un texte visible ou destiné aux lecteurs d'écran qui indique ce qui charge.
useAnimate renvoie une ref de portée et une fonction animate. Attendre chaque appel exécute les étapes dans l'ordre, et stagger répartit une étape sur plusieurs éléments.
Stiffness définit la force de traction du ressort, damping la rapidité avec laquelle il se stabilise. Un damping faible dépasse la cible et oscille.
MotionConfig reducedMotion="user" désactive les animations de transformation et de layout pour les personnes qui demandent moins d'animations à leur système, tout en gardant les fondus.
Un fichier template.tsx est remonté à chaque navigation, contrairement à layout.tsx, donc son passage de initial à animate s'exécute à chaque changement de page. Il a besoin de "use client" car il utilise motion.
Le composant m associé à LazyMotion ne charge que les fonctionnalités que vous listez. domAnimation couvre les animations, variants, sorties et gestes ; domMax ajoute le drag et le layout.
Vous préférez un effet sans JavaScript ? Essayez le
Rejouer
Bonjour
Carte
Planifier
Concevoir
Construire
Lancer
Faites défiler cette boîte vers le bas.
Contenu de la section
Appuyez ici
Balle déplaçable
Carte {n}
{card} : balayez-moi
Réinitialiser
Logo
Menu
Hero
Pied de page
Mot de passe (toute réponse est fausse ici)
Se connecter
Agrandir ou réduire la boîte
Accueil
Tarifs
Blog
Masquer
Afficher
Ouvrir le modal
Enregistré
Fermer
Qu'est-ce qui est inclus ?
L'hébergement, une adresse gratuite et l'éditeur.
Brouillon {n} enregistré
Ajouter une notification
Bienvenue à l'accueil.
À propos de ce studio.
Dites bonjour.
Paragraphe {n}. Continuez à faire défiler pour voir la barre se remplir à mesure que vous lisez cette boîte.
Chargement
Un
Deux
Trois
Lancer
Déplacer
Votre système demande moins d'animations : {answer}. Si c'est oui, la boîte ci-dessous ne fait qu'un fondu.
Affiché avec le composant m
Commencer gratuitement · Sans carte bancaire