Next.js+Framer Motion
Stack IntegrationNext.js + Framer Motion: Animation Patterns
Framer Motion integrates with Next.js App Router to add production-quality animations — page transitions, scroll-triggered reveals, and gesture interactions — without fighting hydration.
Use Cases
- Scroll-triggered entrance animations on landing page sections
- Page transition animations between Next.js App Router routes
- Staggered list animations for cards, testimonials, and feature grids
- Gesture-driven interactions — drag, hover, and tap — on interactive components
Implementation
Mark components using Framer Motion with `'use client'` — motion components are client-only. Use `whileInView` with a `viewport={{ once: true }}` prop for scroll-triggered animations that fire once and don't re-trigger on scroll back. Avoid mixing Tailwind `transform` utilities with Framer Motion's `animate` prop on the same element — they conflict. Split: apply Tailwind positioning classes to an outer `<div>` and Framer Motion animation props to the inner `<motion.div>`.