Styling / UI & Animation
Framer Motion
Production-ready React animation library — declarative motion, gestures, layout animations.
Monthly cost
Free
Popularity
5/5
LLM knowledge
5/5
Difficulty
Easy
bundle: ~40kb
#open-source#typescript
What Framer Motion is good at
Strengths
- +Declarative API (animate, whileHover)
- +Layout animations are magical
- +Great docs
Tradeoffs
- −Bundle adds up (~40kb)
- −React-only
Coding-agent prompt
Drop into Claude / Cursor to get idiomatic Framer Motion code.
You're animating with Framer Motion. Follow these rules: - Prefer the `motion.` component API over imperative `useAnimate` unless you need fine-grained control. - Use `layout` and `layoutId` for shared-element transitions — they're magical and free. - `AnimatePresence` for enter/exit animations of unmounting components. - Lazy-import the full library with `LazyMotion` + `domAnimation` to cut bundle size. - Respect `prefers-reduced-motion` via `useReducedMotion` — animate opacity only, or disable entirely. - Don't animate height from 0 → auto; use `layout` transitions instead.
Popular pairings with Framer Motion
Browse all categories