25 Beispiele für Framer Motion (Motion for React), die live laufen: Fades, Stagger, Layout, Shared Elements, Modals, Akkordeons, Drag, Scroll-Fortschritt, Seitenübergänge und reduzierte Bewegung.
Framer Motion, inzwischen als Motion for React veröffentlicht, animiert jedes Element, das du gegen eine motion-Komponente austauschst: Setze die Props initial, animate und transition. Die 25 Rezepte unten laufen live auf dieser Seite, jeweils mit kopierbarem Code: Einblendungen, Stagger, Drag, Layout und Shared Elements, Exit-Animationen, Scroll-Fortschritt, Seitenübergänge und reduzierte Bewegung.
Installation
Jede Demo hier ist der Code daneben, ausgeführt in deinem Browser. Die Rezepte nutzen das Paket motion; wenn dein Projekt noch framer-motion verwendet, sind Komponenten und Props gleich, nur der Importpfad unterscheidet sich.
Ja. Die Bibliothek wurde in Motion umbenannt, und der React-Teil wird aus motion/react importiert. Das Paket framer-motion wird weiterhin mit derselben API veröffentlicht, ältere Tutorials funktionieren also weiter.
Das Element muss ein direktes Kind von AnimatePresence sein, einen eindeutigen key und eine exit-Prop haben. Wird auch das Elternelement von AnimatePresence entfernt, bleibt nichts zum Animieren übrig.
Animiere height an einem motion-Element von 0 auf "auto" und setze overflow auf hidden. Motion misst die echte Höhe für dich, was CSS-Transitions nicht können.
Motion-Komponenten nutzen Browser-APIs, daher braucht die Datei, die sie rendert, "use client". Eine Server Component kann diese Client Component trotzdem rendern und ihr children übergeben.
Nicht, wenn du bei Transforms und opacity bleibst, die ohne neues Layout laufen. Große Layout-Animationen und viele gleichzeitige Elemente kosten mehr; teste auf einem Mittelklasse-Handy und nutze LazyMotion, um das Bundle zu verkleinern.
Props und Hooks auf dieser Seite
initial ist der erste Frame, animate ist das Ende. Für eine einmalige Einblendung braucht es nichts weiter.
Die Bewegung mit y nutzt einen CSS-Transform, daher schiebt das Element seine Nachbarn unterwegs nie weg.
Varianten sind benannte Zustände. Das Elternelement gibt seinen Zustand weiter, und staggerChildren verzögert jedes Kind ein wenig mehr als das vorherige.
whileInView startet die Animation, wenn das Element den Viewport betritt; once: true verhindert, dass sie bei jedem Scrollen erneut abläuft.
Ein Array ist eine Liste von Keyframes. times verteilt sie über die Dauer, von 0 bis 1.
whileHover und whileTap animieren in einen Zustand, solange die Geste andauert, und kehren dann von selbst zurück.
dragConstraints kann eine Ref auf ein Elternelement nehmen, sodass sich das Element nie aus ihm herausziehen lässt.
Ziehe auf einer Achse und lies dann in onDragEnd Versatz und Geschwindigkeit aus, um zu entscheiden, ob die Karte verschwindet oder zurückschnappt.
Reorder.Group hält das Array im State und gibt dir die neue Reihenfolge. Jedes Reorder.Item braucht den Wert, für den es steht.
Wenn du x durch ein paar Keyframes animierst, entsteht das bekannte Schütteln. Löse es aus, indem du einen key änderst oder animate aus useAnimate aufrufst.
Füge layout hinzu und ändere Größe oder Position mit normalem CSS. Motion misst vorher und nachher und animiert die Differenz mit Transforms.
Zwei Elemente mit derselben layoutId werden als eines behandelt. Wenn die Unterstreichung unter einem neuen Tab gerendert wird, gleitet sie dorthin.
React entfernt Elemente sofort. Mit AnimatePresence bleibt ein verlassendes Kind gemountet, bis seine Exit-Animation endet.
Hintergrund und Panel blenden gemeinsam ein; das Panel steigt zusätzlich auf. Behalte die echte Dialog-Semantik (role, Fokus, Escape) in deinem eigenen Code.
Motion kann auf height: "auto" animieren, was einfache CSS-Transitions nicht können. overflow hidden verhindert, dass der Text beim Öffnen überläuft.
layout an jedem Toast lässt die übrigen sanft nachrücken, wenn einer verschwindet. popLayout sorgt dafür, dass der verschwindende Toast sofort keinen Platz mehr belegt.
mode="wait" lässt die alte Seite vollständig verschwinden, bevor die neue erscheint. Der key muss sich mit der Route ändern.
useScroll liefert scrollYProgress von 0 bis 1. Übergib container, um eine scrollende Box statt des Fensters zu verfolgen, und skaliere den Balken damit.
useTransform bildet einen Motion Value auf einen anderen Bereich ab, sodass sich eine Ebene in anderem Tempo als der Scroll bewegen kann.
animate() kann einen Motion Value antreiben. useTransform rundet ihn, und wenn du den Motion Value direkt renderst, vermeidest du in jedem Frame einen React-Render.
pathLength läuft bei jedem path, circle oder line von 0 bis 1, und das ist der schnellste Weg, ein Häkchen oder eine Unterschrift zu zeichnen.
repeat: Infinity mit linearem Easing ergibt eine gleichmäßige Drehung. Kombiniere ihn mit sichtbarem oder für Screenreader lesbarem Text, der sagt, was geladen wird.
useAnimate gibt eine Scope-Ref und eine animate-Funktion zurück. Wenn du jeden Aufruf mit await abwartest, laufen die Schritte nacheinander, und stagger verteilt einen Schritt auf viele Elemente.
Stiffness legt fest, wie stark die Feder zieht, damping, wie schnell sie zur Ruhe kommt. Niedriges damping schießt über und wackelt.
MotionConfig reducedMotion="user" schaltet Transform- und Layout-Animationen für Menschen ab, die in ihrem System weniger Bewegung wünschen, und behält Fades bei.
Eine template.tsx-Datei wird anders als layout.tsx bei jeder Navigation neu gemountet, daher läuft ihr initial-zu-animate bei jedem Seitenwechsel. Sie braucht "use client", weil sie motion nutzt.
Die m-Komponente plus LazyMotion lädt nur die Features, die du auflistest. domAnimation deckt Animationen, Varianten, Exit und Gesten ab; domMax ergänzt Drag und Layout.
Lieber ein Effekt ganz ohne JavaScript? Probiere den
Erneut abspielen
Hallo
Karte
Planen
Gestalten
Bauen
Starten
Scrolle in dieser Box nach unten.
Abschnittsinhalt
Drück mich
Ziehbarer Ball
Karte {n}
{card}: wisch mich weg
Zurücksetzen
Logo
Menü
Hero
Footer
Passwort (hier ist jede Antwort falsch)
Anmelden
Box vergrößern oder verkleinern
Start
Preise
Blog
Ausblenden
Einblenden
Modal öffnen
Gespeichert
Schließen
Was ist enthalten?
Hosting, eine kostenlose Adresse und der Editor.
Entwurf {n} gespeichert
Toast hinzufügen
Willkommen zu Hause.
Über dieses Studio.
Sag Hallo.
Absatz {n}. Scroll weiter, um zu sehen, wie sich der Balken füllt, während du diese Box durchliest.
Wird geladen
Eins
Zwei
Drei
Abspielen
Bewegen
Dein System wünscht reduzierte Bewegung: {answer}. Bei Ja wird die Box unten nur eingeblendet.
Mit der m-Komponente gerendert
Kostenlos starten · Keine Kreditkarte nötig