A declarative animation library for React (now shipped as "Motion"). You describe states and transitions on motion.* components and it handles springs, gestures, drag and layout animation for you.
Framer Motion's default transition is a real spring — not a fixed-duration tween. Toggle the target and watch it settle naturally, with overshoot and damping.
<motion.div animate={{ x: on ? 260 : 0, rotate: on ? 90 : 0 }} transition={{ type: "spring", stiffness: 300, damping: 18 }} />
Add drag to a component and it becomes throwable. It respects dragConstraints and snaps back with a spring. Grab and fling the tile.
Give items a layout prop and Framer Motion animates position changes automatically. Click any row to move it to the top — the others smoothly reflow.
Normally React just removes elements. Wrap them in <AnimatePresence> and Framer Motion plays an exit animation first. Add and remove cards below.
Declarative gesture props animate to a target while the user hovers or presses — no event handlers required.
cdn.jsdelivr.net (react, react-dom, framer-motion) and compiled in-browser with Babel Standalone. Every spring, drag, layout and AnimatePresence demo above is genuine Framer Motion. If the React bundles fail to load, the page shows a notice — the code shown is exactly what runs.