Motion (anciennement Framer Motion)
I reach for Motion because animation in React becomes declarative, gestures, transitions, and layout shifts in a few props instead of CSS keyframe gymnastics. It used to be called Framer Motion: the project left Framer, now lives at motion.dev, and the package to install is `motion`. A vanilla API covers everything outside React.
Strengths
- Declarative API, `motion.div` replaces CSS keyframes, typed animatable props
- Native gestures (drag, hover, tap) without an extra library
- Automatic layout animations, elements reflow smoothly
- The base layer of copy-paste animated component libraries: Kokonut UI, for one, is built on it. Knowing Motion means you can adjust what you pick there instead of putting up with it
Limitations
- Non-trivial bundle size for micro-animations, overkill on static landings
- Performance degrades with dozens of parallel animated components without tuning
Best for
- React websites that need motion without ad-hoc CSS keyframe coding
- Apps with micro-interactions, page transitions, and smooth drag-and-drop
- Vibecoders who want a striking site without hiring a design freelancer