UI & Animationen 5. Mai 2026 11 min Lesezeit

Motion/Framer Motion mit Claude Code: React Animationen 2026

Motion (ehemals Framer Motion) ist die Standard-Animationsbibliothek für React — deklarative Animationen, Layout-Übergänge und Scroll-getriggerte Effekte. Claude Code generiert performante Animationen ohne Boilerplate.

motion.div Grundlagen

Basicsanimate, initial, exit

# Prompt: "Füge Einblend-Animation für Card-Grid hinzu"

import { motion, AnimatePresence } from 'motion/react';

// Einfache Fade-in Animation
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.4, ease: 'easeOut' }}
>
  Inhalt
</motion.div>

// AnimatePresence für mount/unmount
<AnimatePresence mode="wait">
  {isVisible && (
    <motion.div
      key="modal"
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
      transition={{ duration: 0.2 }}
    >
      <Modal />
    </motion.div>
  )}
</AnimatePresence>

// Staggered Liste — Kinder verzögert einblenden
const containerVariants = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 },  // 100ms pro Kind
  },
};
const itemVariants = {
  hidden: { opacity: 0, x: -20 },
  show: { opacity: 1, x: 0 },
};

<motion.ul variants={containerVariants} initial="hidden" animate="show">
  {items.map(item => (
    <motion.li key={item.id} variants={itemVariants}>{item.name}</motion.li>
  ))}
</motion.ul>

Animations-Prompt: "Füge subtile Einblend-Animationen für [Komponentenliste] hinzu. Stagger-Effekt für Listen. Keine übertriebenen Animationen — professionell und schnell." Claude Code generiert zurückhaltende, performante Animationen.

Layout Animationen: Shared Elements

LayoutAutomatische Layout-Übergänge

# Prompt: "Smooth Übergang wenn User von Grid- zu Detail-Ansicht wechselt"

// layoutId = Shared Element Transition
function ProductGrid() {
  return (
    <div className="grid">
      {products.map(product => (
        <motion.div
          key={product.id}
          layoutId={`product-${product.id}`}  // Unique ID!
          onClick={() => setSelected(product)}
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
        >
          <motion.img
            layoutId={`product-img-${product.id}`}
            src={product.image}
          />
        </motion.div>
      ))}
    </div>
  );
}

function ProductDetail({ product }) {
  return (
    // Gleiche layoutId → Motion animiert automatisch!
    <motion.div layoutId={`product-${product.id}`>}
      <motion.img layoutId={`product-img-${product.id}`>}
        src={product.image}
      />
      // Neue Elemente mit AnimatePresence
      <motion.p initial={{ opacity: 0 }} animate={{ opacity: 1 }} delay={0.2}>
        {product.description}
      </motion.p>
    </motion.div>
  );
}

// layout Prop für automatische Größen-Animation:
<motion.div layout>  // Animiert automatisch wenn Größe sich ändert
  {isExpanded && <ExpandedContent />}
</motion.div>

Scroll-Animationen

ScrollwhileInView und useScroll

# Prompt: "Parallax-Effekt für Hero, Reveal-Animation für Sections"

import { useScroll, useTransform, motion } from 'motion/react';

// Scroll-basierter Parallax
function HeroSection() {
  const { scrollY } = useScroll();
  const y = useTransform(scrollY, [0, 500], [0, -150]);
  const opacity = useTransform(scrollY, [0, 300], [1, 0]);

  return (
    <motion.section style={{ y, opacity }}>
      <h1>Hero Content</h1>
    </motion.section>
  );
}

// whileInView — animiert wenn Element im Viewport
<motion.div
  initial={{ opacity: 0, y: 60 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-100px" }}
  transition={{ duration: 0.6, ease: "easeOut" }}
>
  Section Content  // Animiert einmalig wenn 100px vor Viewport
</motion.div>

// Scroll Progress Indicator
function ProgressBar() {
  const { scrollYProgress } = useScroll();
  return (
    <motion.div
      className="fixed top-0 left-0 right-0 h-1 bg-indigo-600 origin-left"
      style={{ scaleX: scrollYProgress }}
    />
  );
}

Performance-Regel: Nur transform und opacity animieren — sie laufen auf dem GPU und triggern kein Layout-Reflow. Niemals width, height, top, left direkt animieren. Claude Code hält diese Regel automatisch ein.

Gestures: Drag und Hover

# Prompt: "Drag-and-Drop Karten mit snap-back"

<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: -50, bottom: 50 }}
  dragElastic={0.2}  // Elastizität beim Ziehen über Grenze
  whileDrag={{ scale: 1.05, boxShadow: "0 20px 60px rgba(0,0,0,0.3)" }}
  onDragEnd={(event, info) => {
    // info.offset.x/y = finale Position
    if (info.offset.x > 100) handleSwipeRight();
    if (info.offset.x < -100) handleSwipeLeft();
  }}
>
  Drag mich!
</motion.div>

# Hover mit useMotionValue für magnetischen Effekt:
function MagneticButton() {
  const x = useMotionValue(0);
  const y = useMotionValue(0);

  const handleMouse = (e: React.MouseEvent<HTMLDivElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    x.set((e.clientX - rect.left - rect.width / 2) * 0.3);
    y.set((e.clientY - rect.top - rect.height / 2) * 0.3);
  };

  return (
    <motion.div style={{ x, y }} onMouseMove={handleMouse}
      onMouseLeave={() => { x.set(0); y.set(0); }}
      transition={{ type: "spring", stiffness: 300, damping: 30 }}>
      <button>Magnetisch</button>
    </motion.div>
  );
}

UI-Animationen im Kurs

Im Claude Code Mastery Kurs: vollständiges Motion-Modul mit Animation-Patterns, Layout-Übergängen, Scroll-Effekten und Gesture-Handling — inkl. Performance-Optimierung und Accessibility-Considerations.

14 Tage kostenlos testen →