Animation & UI 5. Mai 2026 9 min Lesezeit

Framer Motion mit Claude Code: React Animationen 2026

Flüssige, physikalisch korrekte Animationen sind in modernen React-Apps kein Nice-to-have mehr — sie sind erwartet. Framer Motion ist die führende Animationsbibliothek im React-Ökosystem. Und mit Claude Code schreibst du komplexe Animations-Logik in Minuten statt Stunden.

motion Components Variants Scroll Drag & Gestures

1. motion Components: animate, initial, exit

Framer Motion ersetzt Standard-HTML-Elemente durch motion.*-Äquivalente. Das Herzstück sind drei Props: initial (Startzustand), animate (Zielzustand) und exit (Zustand beim Verlassen des DOM).

TSX

import { motion } from "framer-motion";

// Claude Code Prompt: "Erstelle eine motion.div die von unten einschwebt"
export function FadeSlideIn({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 32 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -16 }}
      transition={{ duration: 0.4, ease: "easeOut" }}
    >
      {children}
    </motion.div>
  );
}

Claude Code Prompt-Tipp: Beschreibe die gewünschte Animation in natürlicher Sprache — z.B. "Karte erscheint mit Federphysik von links" — und Claude generiert die passenden transition-Werte automatisch (spring, mass, stiffness, damping).

Die transition-Prop steuert den Animations-Typ. Framer Motion unterstützt tween, spring und inertia. Spring-Animationen fühlen sich am natürlichsten an:

TSX

// Spring-basierte Karten-Animation
<motion.div
  initial={{ scale: 0.8, opacity: 0 }}
  animate={{ scale: 1, opacity: 1 }}
  transition={{
    type: "spring",
    stiffness: 300,
    damping: 24,
    mass: 0.8
  }}
/>

2. Variants: Wiederverwendbare Animation-States

Variants externalisieren Animations-Definitionen aus dem JSX. Das macht Code lesbarer und ermöglicht komplexe Stagger-Effekte für Listen und Grids.

TSX

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.08,  // Kinder zeitversetzt einblenden
      delayChildren: 0.2
    }
  }
};

const itemVariants = {
  hidden: { opacity: 0, x: -20 },
  visible: {
    opacity: 1,
    x: 0,
    transition: { type: "spring", stiffness: 260, damping: 20 }
  }
};

export function AnimatedList({ items }: { items: string[] }) {
  return (
    <motion.ul
      variants={containerVariants}
      initial="hidden"
      animate="visible"
    >
      {items.map((item) => (
        <motion.li key={item} variants={itemVariants}>
          {item}
        </motion.li>
      ))}
    </motion.ul>
  );
}

Tipp: Variants propagieren automatisch durch den Component-Baum. Kinder erben initial und animate vom Elternteil — du musst sie nicht explizit setzen.

Hover- und Tap-Variants machen interaktive States deklarativ:

TSX

const buttonVariants = {
  idle: { scale: 1, backgroundColor: "#0055ff" },
  hover: { scale: 1.04, backgroundColor: "#0044ee" },
  tap:   { scale: 0.97 }
};

<motion.button
  variants={buttonVariants}
  initial="idle"
  animate="idle"
  whileHover="hover"
  whileTap="tap"
>
  Jetzt starten
</motion.button>

3. AnimatePresence: Ein- und Ausblend-Animationen

Das größte Problem klassischer CSS-Animationen: Elemente, die aus dem DOM entfernt werden, können nicht animiert werden. AnimatePresence löst das, indem Framer Motion das Element im DOM hält, bis die Exit-Animation abgeschlossen ist.

TSX

import { AnimatePresence, motion } from "framer-motion";

export function Modal({ isOpen, onClose, children }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <>
          // Backdrop
          <motion.div
            className="backdrop"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
          />
          // Modal Panel
          <motion.div
            className="modal-panel"
            initial={{ opacity: 0, scale: 0.92, y: 20 }}
            animate={{ opacity: 1, scale: 1,   y: 0 }}
            exit={{ opacity: 0,  scale: 0.92, y: 20 }}
            transition={{ type: "spring", duration: 0.35 }}
          >
            {children}
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
}

Für Seiten-Übergänge in Next.js oder React Router kombinierst du AnimatePresence mit dem mode="wait"-Prop — die alte Seite animiert vollständig aus, bevor die neue einblendet:

TSX

// Next.js App Router — layout.tsx
<AnimatePresence mode="wait">
  <motion.div
    key={pathname}
    initial={{ opacity: 0, x: 20 }}
    animate={{ opacity: 1, x: 0 }}
    exit={{ opacity: 0, x: -20 }}
    transition={{ duration: 0.28 }}
  >
    {children}
  </motion.div>
</AnimatePresence>

4. Scroll Animationen: useScroll & useTransform

useScroll gibt reaktive Motion-Values zurück, die sich mit dem Scroll-Fortschritt des Users verändern. useTransform mappt diese Werte auf beliebige CSS-Properties.

TSX

import { useScroll, useTransform, motion } from "framer-motion";

export function ParallaxHero() {
  const { scrollY } = useScroll();

  // scrollY 0→300px mappt auf y 0→-120px (Parallax-Effekt)
  const y = useTransform(scrollY, [0, 300], [0, -120]);

  // Opacity blendet aus wenn gescrollt wird
  const opacity = useTransform(scrollY, [0, 200], [1, 0]);

  return (
    <motion.section style={{ y, opacity }} className="hero">
      <h1>Willkommen</h1>
    </motion.section>
  );
}

Für element-relative Scroll-Progress (z.B. "Element ist 50% sichtbar") nutzt du useScroll mit dem target-Ref:

TSX

export function ScrollRevealCard() {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"]
  });

  const scale = useTransform(scrollYProgress, [0, 0.5], [0.85, 1]);
  const opacity = useTransform(scrollYProgress, [0, 0.4], [0, 1]);

  return (
    <motion.div ref={ref} style={{ scale, opacity }} className="card">
      Content hier
    </motion.div>
  );
}

Performance-Tipp: Motion-Values (useTransform, useSpring) laufen außerhalb des React-Render-Zyklus direkt auf der GPU. Du bekommst 60fps-Scroll-Animationen ohne Re-Renders.

5. Drag und Gestures

Framer Motion macht Drag-Interaktionen deklarativ. Das drag-Prop aktiviert Drag, dragConstraints begrenzt den Bereich, dragElastic simuliert Widerstand an den Rändern.

TSX

// Draggable Karte mit Constraints und Snap-Back
<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: -50, bottom: 50 }}
  dragElastic={0.15}
  dragTransition={{ bounceStiffness: 400, bounceDamping: 30 }}
  whileDrag={{ scale: 1.05, cursor: "grabbing", zIndex: 10 }}
  className="draggable-card"
>
  Drag mich!
</motion.div>

// Swipe-to-Dismiss (z.B. für Notifications)
<motion.div
  drag="x"
  dragConstraints={{ left: 0, right: 0 }}
  onDragEnd={(_, info) => {
    if (Math.abs(info.offset.x) > 120) dismiss();
  }}
>
  Toast-Notification
</motion.div>

Gesture-Callbacks (onHoverStart, onTap, onPan) geben dir vollständige Kontrolle über pointer-Events. In Kombination mit useMotionValue baust du custom Drag-Interaktionen:

TSX

import { useMotionValue, useTransform } from "framer-motion";

export function TiltCard() {
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const rotateX = useTransform(y, [-150, 150], [15, -15]);
  const rotateY = useTransform(x, [-150, 150], [-15, 15]);

  return (
    <motion.div
      style={{ x, y, rotateX, rotateY, perspective: 800 }}
      drag
      dragElastic={0.08}
      className="tilt-card"
    >
      3D Tilt Effekt
    </motion.div>
  );
}

6. Layout Animationen: Automatische FLIP-Technik

Layout-Animationen sind das mächtigste Feature in Framer Motion. Das layout-Prop animiert automatisch wenn sich Position oder Größe eines Elements ändert — ohne manuelle Keyframes. Intern verwendet Framer Motion die FLIP-Technik (First, Last, Invert, Play).

TSX

// FLIP-Animation: Elemente reorganisieren sich automatisch
export function SortableList({ items, onSort }) {
  return (
    <ul>
      {items.map((item) => (
        <motion.li
          key={item.id}
          layout             // ← Diese eine Prop reicht!
          transition={{ type: "spring", stiffness: 350, damping: 25 }}
          onClick={() => onSort(item.id)}
        >
          {item.label}
        </motion.li>
      ))}
    </ul>
  );
}

Shared Layout Animations über Komponenten-Grenzen hinweg — z.B. ein Thumbnail das zur Detailansicht expandiert — ermöglicht layoutId:

TSX

// Card expand → Detail (Shared Element Transition)
{!isExpanded ? (
  <motion.div
    layoutId="product-card"
    className="card-thumbnail"
    onClick={() => setExpanded(true)}
  >
    <motion.img layoutId="product-image" src={img} />
  </motion.div>
) : (
  <motion.div
    layoutId="product-card"
    className="card-detail"
    onClick={() => setExpanded(false)}
  >
    <motion.img layoutId="product-image" src={img} />
    <p>Vollständige Beschreibung...</p>
  </motion.div>
)}

Wichtig: Gleiche layoutId-Strings verbinden Elemente über verschiedene Render-Zustände. Framer Motion interpoliert Position und Größe automatisch — keine zusätzliche Konfiguration nötig.

7. Claude Code Workflow für Framer Motion

Claude Code beschleunigt die Arbeit mit Framer Motion massiv — besonders bei der Entwicklung komplexer Animations-Systeme. So nutzt du Claude Code optimal:

Prompt-Strategie

Beschreibe die Animation visuell: "Karten fliegen von links rein, gestaffelt mit 100ms Abstand, Federphysik."

Variants generieren

Claude erstellt komplette Variant-Objekte inklusive staggerChildren, Timing und Easing-Kurven.

Performance-Review

Claude identifiziert animierte Properties die Layout-Thrashing verursachen (width/height statt transform/opacity).

Accessibility

Claude fügt automatisch prefers-reduced-motion-Checks ein — wichtig für Nutzer mit Bewegungsempfindlichkeit.

TSX

// Claude Code: "Respektiere prefers-reduced-motion"
import { useReducedMotion } from "framer-motion";

export function AccessibleAnimation({ children }) {
  const reduceMotion = useReducedMotion();

  return (
    <motion.div
      initial={{ opacity: 0, y: reduceMotion ? 0 : 24 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: reduceMotion ? 0.01 : 0.4 }}
    >
      {children}
    </motion.div>
  );
}

Mit Claude Code als Pair-Programmer iterierst du Animations-Designs in Echtzeit. Starte mit einfachen motion-Components, erweitere zu Variants, und optimiere mit Scroll- und Layout-Animationen — Claude begleitet jede Stufe.

Framer Motion mit KI beschleunigen

Starte deinen kostenlosen Trial und lass Claude Code deine React-Animationen entwickeln.

Kostenlos testen →