Comparing
Production-ready animations and gestures for React — declarative, physics-based, with layout animations and exit transitions.
🐻 Bear necessities for state management in React
| Metric | framer-motion | zustand |
|---|---|---|
| Ecosystem | npm | npm |
| Difficulty | Intermediate | Intermediate |
| Weekly downloads | 7.0M | 30.7M↑ |
| Latest version | v12.6.2 | v5.0.12 |
| Recipes | 2 | 7↑ |
framer-motion only
Shared
zustand only
React apps needing UI animations: page transitions, list reordering, drag-and-drop, hover effects, scroll-triggered reveals, and exit animations.
Use Zustand for global UI state that multiple components need to read and write: auth status, theme preferences, shopping cart, modal state, or any data too complex for prop drilling but not complex enough to justify Redux.
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.
Zustand is not designed for server state — use React Query for that. For very large applications with complex state machines or time-travel debugging requirements, Redux Toolkit's tooling is more mature.
framer-motion
zustand
+3 more