Zum Inhalt springen
Alle Technologien

Framer Motiondie 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.

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

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>
  )
}

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

Passt zu Framer Motion

GSAPTailwind CSS

Interesse an Framer Motion?

Lassen Sie uns über Ihr Projekt sprechen. Wir beraten Sie gerne unverbindlich.

Jetzt kontaktieren