Comparing
Production-ready animations and gestures for React — declarative, physics-based, with layout animations and exit transitions.
Create your next immutable state by mutating the current one
| Metric | framer-motion | immer |
|---|---|---|
| Ecosystem | npm | npm |
| Difficulty | Intermediate | Beginner ✓ |
| Weekly downloads | 7.0M | 41.7M↑ |
| Latest version | v12.6.2 | v11.1.4 |
| Recipes | 2↑ | 1 |
framer-motion only
Shared
immer only
React apps needing UI animations: page transitions, list reordering, drag-and-drop, hover effects, scroll-triggered reveals, and exit animations.
Use Immer whenever you have deeply nested state updates that are painful to write immutably: Redux reducers, Zustand's set function, or React useState with complex objects. It's built into Redux Toolkit's createSlice, so you're probably already using it.
Non-React projects, performance-critical animations running at 120fps with many particles (use CSS or WebGL), or very simple opacity/transform transitions where CSS is sufficient.
For flat, simple state (a counter, a boolean toggle), immer's overhead isn't worth it — just spread the object. Immer also has edge cases with classes, Maps, and Sets that require using enableMapSet() and enableAllPlugins().
framer-motion
immer