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