Framer Motion
Add production-quality animations to React apps with Framer Motion - layout animations, gestures, variants, AnimatePresence, and scroll animations.
skill: Framer Motion category: Web Development tags: [Framer Motion, Animation, React, UI, Motion] readingTime: 5
Animations should serve communication - they guide attention, show state changes, and provide spatial context. Framer Motion makes production animations achievable without deep animation knowledge. The golden rule: animate transform properties (translate, scale, rotate) not layout properties (width, height, top, left) for smooth 60fps.
Workflow
- Animate with motion componentsmotion.div (and motion.*) are drop-in replacements for HTML elements that accept animation props.
- Use variants for coordinated animationsVariants define named animation states - parent variants stagger children automatically without prop drilling.
- Animate mount/unmount with AnimatePresenceReact removes elements instantly - AnimatePresence lets elements animate out before removal.
- Animate shared layout elementsLayout animations automatically animate an element from its old position to its new position when it moves in the DOM.
- Trigger animations on scrollScroll-triggered animations improve perceived performance - elements animate in as they enter the viewport.
Output Format
Framer Motion: motion.* for basic animations, variants for staggered lists, AnimatePresence for exit animations, layoutId for shared layout.
<AnimatePresence>
{show && <motion.div layoutId="card" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} />}
</AnimatePresence>Examples
Input
Output
Edge Cases & Gotchas
- AnimatePresence mode="wait" - By default, exit and enter animations overlap. mode="wait" ensures the exiting element finishes before the entering one starts - good for page transitions.
- Performance with many animated elements - Animating hundreds of elements simultaneously can drop frames. Use will-change: transform on the CSS side and limit simultaneous animations.
- Reduced motion preference - Respect prefers-reduced-motion. Use: const prefersReducedMotion = useReducedMotion(); and conditionally skip animations.
- SSR hydration mismatch - initial prop causes HTML mismatch during SSR hydration. Use suppressHydrationWarning or skip the initial prop for SSR-rendered components.
When to Break These Rules
- Use CSS transitions and keyframes for simple hover effects and entrance animations - Framer Motion adds 30KB for what can be done in 5 lines of CSS.
- Use GSAP for complex timeline-based animations (scrollytelling, synchronized multi-element sequences) - GSAP has better performance and control for complex narratives.
Reference Files
https://www.framer.com/motion/https://www.framer.com/motion/animation/