Framer Motion

Was ist Framer Motion?

Framer Motion ist eine Open-Source-Bibliothek für Animationen in React. Animationen werden deklarativ über Props an speziellen Komponenten wie motion.div beschrieben, statt sie mit CSS-Keyframes oder JavaScript-Timern von Hand zu steuern. Die Bibliothek wird inzwischen unter dem Namen Motion weitergeführt und unterstützt neben React auch reines JavaScript.

Vorteile von Framer Motion

• Deklarative API: Zustände wie Einblenden, Ausblenden oder Hover werden direkt am Element beschrieben.
• Layout-Animationen: Größen- und Positionswechsel von Elementen lassen sich mit wenig Code animieren.
• Ein- und Ausblenden: Mit AnimatePresence werden auch Elemente animiert, die aus dem DOM entfernt werden.
• Gesten: Drag, Hover, Tap und scrollabhängige Animationen sind eingebaut.
• Physikbasierte Übergänge: Federanimationen wirken natürlicher als lineare Übergänge.

Nachteile von Framer Motion

• Paketgröße: Die Bibliothek erhöht das JavaScript-Bundle, wenn sie nicht gezielt auf die benötigten Funktionen reduziert wird.
• Client-seitig: Animierte Komponenten müssen in Next.js als Client Components laufen.
• Performance bei vielen Elementen: Sehr viele gleichzeitige Animationen können auf schwächeren Geräten ruckeln.
• Für einfache Übergänge oft unnötig, da CSS-Transitions dort genügen.

Einsatzbereich von Framer Motion

Framer Motion wird für Websites und Webanwendungen eingesetzt, die Übergänge, Mikrointeraktionen und Scroll-Effekte brauchen, etwa Marketing-Seiten, Produktpräsentationen oder interaktive Oberflächen. Für Barrierearmut sollte die Einstellung „Bewegung reduzieren“ des Betriebssystems berücksichtigt werden, was die Bibliothek unterstützt.

Alternativen zu Framer Motion

• CSS-Transitions und CSS-Animationen
• GSAP
• React Spring
• Web Animations API
• Auto Animate