Zum Inhalt springen
Projekt besprechen
Alle Technologien

Framer Motion die Animations-Bibliothek für React

Framer Motion ist eine deklarative Animations-Bibliothek für React. Statt Animationen Schritt für Schritt zu skripten, beschreiben Sie Ziel-Zustände (initial, animate, exit) und Varianten. Die Bibliothek kümmert sich um Übergänge, Timing und das saubere Ein- und Ausblenden beim Mounten und Unmounten von Komponenten. Ihre Stärken sind Gesten (Hover, Tap, Drag), automatische Layout-Animationen bei Größen- oder Positions-Wechseln und konsistente Bewegungen über viele Komponenten hinweg. Wir setzen Framer Motion in React- und Next.js-Projekten dezent ein: Bewegung soll Zustandswechsel verständlich machen, nicht ablenken. Für framework-unabhängige Timelines oder aufwändige Scroll-Choreografien greifen wir dagegen zu GSAP.

Interface & Bewegung Systemebene
Die Rolle von Framer Motion im Projekt, schematisch dargestellt.

01 / Einsatz

Wofür sich Framer Motion eignet

  • Ein- und Ausblend-Animationen beim Routing (AnimatePresence)
  • Scroll- und Viewport-getriggerte Entry-Effekte
  • Gesten: Hover-, Tap- und Drag-Interaktionen
  • Automatische Layout-Animationen bei Positions-Wechseln
  • Micro-Interactions in Dashboards und Web-Apps

02 / Einblick

Framer Motion in der Praxis

components/Features.tsx
'use client'
import { motion } from 'framer-motion'

const list = { hidden: {}, show: { transition: { staggerChildren: 0.12 } } }
const item = {
  hidden: { opacity: 0, y: 24 },
  show: { opacity: 1, y: 0, transition: { duration: 0.5 } },
}

export function Features({ items }: { items: string[] }) {
  return (
    <motion.ul variants={list} initial="hidden" whileInView="show"
      viewport={{ once: true, margin: '-80px' }}>
      {items.map((text) => (
        <motion.li key={text} variants={item}>{text}</motion.li>
      ))}
    </motion.ul>
  )
}

03 / Vorgehen

So arbeiten wir mit Framer Motion

  1. Motion-Konzept: welche Zustandswechsel Bewegung wirklich verständlicher macht

  2. Varianten-Struktur definieren (wiederverwendbar, konsistent über Komponenten)

  3. Gesten und Layout-Animationen dort, wo sie Orientierung geben

  4. AnimatePresence für saubere Ein-/Ausblend-Übergänge

  5. prefers-reduced-motion respektieren (useReducedMotion-Hook)

  6. Performance-Check: schlanke Re-Renders, GPU-freundliche Transforms

Das liefern wir bei Framer Motion

  • Animierte React-Komponenten mit konsistenten Motion-Varianten
  • Wiederverwendbare Transition- und Varianten-Presets
  • Reduced-Motion-Fallbacks für Barrierefreiheit
  • Performance-geprüfte Umsetzung ohne unnötige Re-Renders
  • Übergabe-Doku: Varianten-Konventionen und Erweiterungs-Hinweise

Häufige Fragen zu Framer Motion

Framer Motion oder GSAP: Wann was?
Framer Motion ist auf React zugeschnitten und deklarativ: Sie beschreiben Ziel-Zustände und Varianten, die Bibliothek regelt den Rest. Das passt gut zu Komponenten-Animationen, Gesten und Layout-Wechseln. GSAP ist framework-unabhängig und stärker, wenn es um exakt getaktete Timelines, komplexe Scroll-Choreografien (ScrollTrigger) oder Animationen außerhalb von React geht. In React-Projekten kombinieren wir beide durchaus: Framer Motion für die UI, GSAP für aufwändige Scroll-Sequenzen.
Läuft Framer Motion mit Next.js und Server Components?
Ja. Framer Motion arbeitet im Browser, animierte Komponenten markieren wir daher als Client-Komponente („use client"), während der Rest der Seite als Server Component gerendert bleibt. So bleibt der Server-seitige Vorteil von Next.js erhalten und nur die tatsächlich animierten Teile laufen im Client. Das ist ein etabliertes Muster, das wir sauber trennen.
Machen Animationen die App nicht träge?
Nur bei unsauberer Umsetzung. Wir animieren bevorzugt transform und opacity, halten die Varianten schlank und achten darauf, dass Animationen keine unnötigen Re-Renders auslösen. Layout-Animationen setzen wir gezielt ein, weil sie teurer sind als einfache Transitions. Vor der Übergabe prüfen wir das Verhalten auf realen Geräten.
Wie berücksichtigen Sie Nutzer, die weniger Bewegung wollen?
Über den useReducedMotion-Hook: Ist am System reduzierte Bewegung aktiv, liefern wir dezente oder statische Varianten ohne große Positions- und Skalierungs-Effekte. Das ist bei uns Standard und keine nachträgliche Ergänzung. Bewegung soll die Bedienung unterstützen, nicht bevormunden.
Können Sie Animationen in unsere bestehende React-App einbauen?
Ja. Framer Motion lässt sich schrittweise ergänzen. Wir animieren zunächst einzelne Komponenten oder Flows, ohne die App umzubauen. Sinnvoll ist, vorab ein paar wiederverwendbare Varianten festzulegen, damit die Bewegung über die App hinweg konsistent wirkt statt zusammengewürfelt. Die bestehende Struktur tasten wir dabei so wenig wie möglich an.

Passt zu Framer Motion

Passende Leistungen

Framer Motion für Ihr Projekt?

Beschreiben Sie uns Ihre Anforderungen. Wir besprechen, wie die Technologie in Ihr Projekt und Ihre vorhandene Infrastruktur passt.

Projekt besprechen