Tobias Ludwig
zurück zur Tech-Wiki
Tech-Wiki/Libraries
F

Framer Motion

Production-grade Animationen für React (Spring, Layout, Gesten).

·Framer·MIT
WebsiteDocsRepository

Übersicht

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.

Eingesetzt in