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.
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.
Ü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.
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.
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.
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.