framer-motion nimmt dir die mühsame Handarbeit bei Animationen ab. Statt Keyframes und Timing selbst zu verwalten, beschreibst du nur den Zielzustand, und die Bibliothek rechnet den Weg dorthin. Dieser Leitfaden führt dich von der ersten Bewegung bis zu gestaffelten Listen und zeigt, worauf es bei ruhiger, hochwertiger Motion ankommt.
- framer-motion ersetzt keine CSS-Übergänge. Es lohnt sich dort, wo Zustände kommen und gehen.
- Drei Angaben reichen für den Anfang: initial, animate und transition.
- Staffeln statt gleichzeitig: wenige Zehntelsekunden Versatz machen aus einer Bewegung eine Reihenfolge.
- prefers-reduced-motion gehört in jede Komponente. Es ist eine Zeile Code und für manche Menschen der Unterschied.
Das motion-Element als Grundbaustein
Jede Animation beginnt mit einem motion-Element. Aus einem div wird motion.div, aus einem Button motion.button. Diese Elemente verhalten sich wie ihre normalen Gegenstücke, verstehen aber zusätzliche Props für Bewegung.
Mit dem animate-Prop legst du fest, wie das Element aussehen soll. Ein Wert wie animate mit opacity 1 und y 0 beschreibt den Zielzustand. Ändert sich dieser Wert, animiert framer-motion sanft dorthin, ohne dass du den Zwischenweg selbst berechnest.
Für den Startzustand nutzt du initial. So blendet ein Element beim Laden aus opacity 0 und einer leichten Verschiebung ein. Das ergibt den typischen ruhigen Slide-up, der auf vielen Seiten für den ersten Eindruck sorgt.
- initial
- opacity 0, y 12
- animate
- opacity 1, y 0
- duration
- 0.5 s
- ease
- cubic-bezier(.22, 1, .36, 1)
- stagger
- 80 ms
Zwölf Pixel Weg und eine halbe Sekunde. Mehr braucht ein Hero nicht.
Derselbe Weg, nur versetzt gestartet. Der Schalter zeigt, was bei reduzierter Bewegung passiert.
<motion.div initial={{ opacity: 0, y: 22 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }} Weitfeld</motion.div>
Übergänge mit transition steuern
Das transition-Prop bestimmt Tempo und Charakter der Bewegung. Über duration gibst du die Dauer in Sekunden an, über ease die Beschleunigungskurve. Werte zwischen 0,3 und 0,6 Sekunden wirken für die meisten UI-Bewegungen angenehm.
Statt einer Kurve kannst du auch eine Feder wählen. Mit type spring reagiert die Bewegung auf stiffness und damping und wirkt dadurch physischer. Für ruhige Oberflächen bleibt eine weiche Kurve wie [0.22, 1, 0.36, 1] aber oft die bessere Wahl, weil sie kontrollierter ausläuft.
Dieselbe Kurve, drei Zeiten. Der brauchbare Bereich ist schmaler, als man beim Bauen denkt.
Drei Kurven decken den Alltag ab.
Eine Seite mit drei Kurven wirkt geordnet, eine mit zwölf wirkt zufällig. Diese drei reichen fast immer.
Varianten für saubere Zustände
Sobald ein Element mehrere Zustände hat, werden inline-Werte unübersichtlich. Varianten lösen das: Du definierst benannte Zustände wie hidden und visible als Objekt und referenzierst sie über initial und animate nur noch mit ihrem Namen.
Der große Vorteil zeigt sich bei verschachtelten Elementen. Ein Elternteil kann seine Varianten an alle Kinder weitergeben. So steuerst du eine ganze Gruppe über einen einzigen Zustandswechsel, ohne jedes Kind einzeln anzusprechen.
const auftauchen = { hidden: { opacity: 0, y: 18 }, show: { opacity: 1, y: 0 },}; <motion.li variants={auftauchen} />
Listen staffeln mit staggerChildren
Erscheinen viele Elemente gleichzeitig, wirkt das flach. Mit staggerChildren in der Eltern-Variante setzt du einen kleinen Versatz zwischen den Kindern, meist 0,05 bis 0,12 Sekunden. Die Elemente ploppen dann nacheinander auf und der Blick wird geführt.
Damit das funktioniert, bekommt jedes Kind dieselben Variantennamen wie das Elternteil. framer-motion kümmert sich um die Reihenfolge und den Abstand. Für Karten, Navigationspunkte oder Feature-Listen ist das ein wirkungsvoller, dezenter Effekt.
const liste = { hidden: {}, show: { transition: { staggerChildren: 0.08 } },};
Beim Scrollen animieren
Viele Bewegungen sollen erst auslösen, wenn ein Element in den sichtbaren Bereich kommt. Dafür ersetzt du animate durch whileInView und definierst mit viewport, wann und wie oft die Animation startet. Mit once true läuft sie nur beim ersten Sichtbarwerden.
So vermeidest du, dass unten liegende Inhalte ihre Einblendung schon abgespielt haben, bevor der Nutzer sie überhaupt sieht. Das Ergebnis ist eine Seite, die sich beim Scrollen ruhig und lebendig aufbaut.
Bewegung barrierefrei halten
Nicht jeder möchte Bewegung sehen. Der Hook useReducedMotion aus framer-motion liest die Systemeinstellung prefers-reduced-motion aus. Ist sie aktiv, lieferst du eine ruhigere Variante, etwa nur ein Einblenden ohne Verschiebung.
Halte Animationen zudem kurz und vermeide starke Skalierung, Rotationen oder hektisches Springen. Gute Motion unterstützt den Inhalt und drängt sich nie in den Vordergrund.
const reduce = useReducedMotion(); <motion.div initial={reduce ? false : { opacity: 0, y: 22 }} animate={{ opacity: 1, y: 0 }}/>
Die drei häufigsten Anfängerfehler
Fast alle Probleme mit framer-motion sind keine Fehler in der Bibliothek, sondern eine Erwartung, die nicht zur Technik passt.
- whileInView bei absolut gesetzten Kindern. Der Beobachter meldet solche Elemente nicht zuverlässig, und dann bleibt der Inhalt für immer unsichtbar. Häng ihn an einen Kasten mit echter Höhe.
- Breite oder Höhe auf auto animieren. Der Zielwert wird dafür mitten in der Bewegung gemessen, und das ruckelt sichtbar. Miss den Wert einmal selbst und animiere in Pixeln.
- Alles gleichzeitig starten. Zehn Elemente mit derselben Verzögerung wirken wie ein Sprung. Ein Versatz von 0,06 bis 0,12 Sekunden macht daraus eine Reihenfolge.
- height von 0 auf auto animieren.
- top und left für eine Verschiebung.
- Zehn Elemente mit derselben Verzögerung.
- Skalierung von 0.6 auf 1 bei großen Flächen.
- Gemessene Pixelhöhe animieren.
- transform über x und y.
- 0,06 bis 0,12 Sekunden Versatz je Element.
- Von 0.98 auf 1, kaum sichtbar und trotzdem spürbar.
Wenn eine Bewegung erklärt werden muss, war sie zu groß.
Reduzierte Bewegung ernst nehmen
Manche Menschen bekommen von bewegten Oberflächen Schwindel oder Kopfschmerzen. Ihr Betriebssystem sagt das der Seite, wenn man fragt.
In framer-motion fragst du mit useReducedMotion. Der Rest ist eine Entscheidung je Komponente: Endzustand sofort zeigen, statt die Bewegung nur schneller zu machen. Eine schnellere Animation ist immer noch eine Animation.
