API style
Motion is declarative: you put animate, whileHover and exit props on motion.div. react-spring is hooks-first: you call useSpring or useTransition and pass the animated values to animated.div.
// Motion
<motion.div animate={{ x: open ? 200 : 0 }} transition={{ type: 'spring' }} />
// react-spring
const styles = useSpring({ x: open ? 200 : 0 });
<animated.div style={styles} />Features
Motion includes gestures (drag, hover, tap), layout animations that move elements between positions, shared layout with layoutId, scroll hooks and AnimatePresence for exits. react-spring focuses on physics-based value animation and transitions, and leaves gestures to libraries such as @use-gesture.
Platforms
Motion targets the web, with React and vanilla JavaScript APIs. react-spring has web, native and three.js targets; @react-spring/native supports React Native 0.78 and later.
Our take
For a typical React web app, Motion is the easier start. If you love hooks and physics, or need the same mental model in React Native, try react-spring. Both put animation in code. If designers should own motion and hand off a file, look at runtime tools such as Rive or ExodeUI. We make ExodeUI.