Framer Motion

Was ist es?

Framer Motion ist die Production-Animation-Library für React — Springs, Gestures, Layout-Animationen, Variants, AnimatePresence. Default-Choice für UI-Animationen mit Polish.

Quickstart

pnpm add framer-motion

import { motion, AnimatePresence } from 'framer-motion'

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ type: 'spring', stiffness: 200 }}
/>

Typische Patterns

• <AnimatePresence> für Exit-Animationen beim Unmount:

  <AnimatePresence>
    {open && <motion.div exit={{ opacity: 0 }} />}
  </AnimatePresence>
  

• layout-Prop für magische Layout-Animationen ohne FLIP-Manual.
• Variants für orchestrierte Sequenzen + staggerChildren.
• useScroll + useTransform für Scroll-Linked-Animations.
• useMotionValue für imperative Updates ohne Re-Render.

Gotchas / Was oft schiefgeht

• <AnimatePresence> braucht stabile key auf Kindern, sonst kein Exit.
• layout-Animationen können teuer sein — viele animierte Items → Performance-Bottleneck.
• Bundle-Size ist nicht klein (~50kb+) — bei Marketing-Sites mit nur 1-2 Animations evtl. zu viel.
• Mit Next.js App Router: Motion-Components brauchen "use client".
• whileHover/whileTap auf Touch-Devices: kein Hover — explizit handhaben.

Wann nicht?

Für komplexe Timelines, ScrollTrigger-Choreografien oder SVG-Morphing → GSAP. Reine CSS-Transitions ohne Logik → Tailwind transition-* reicht.