framer-motion-interactive-animation

To add hover and tap gestures to React components, apply Framer Motion properties directly to interactive elements like buttons and cards. This Skill provides the configuration for responsive interactive animations without requiring you to build the interaction behavior from scratch.

Framer Motion requires client components for animations in Next.js. This Skill handles the appropriate 'use client' directives automatically, ensuring hover, tap, and scroll animations function correctly within the Next.js App Router environment.

To animate exit transitions when a React component unmounts, wrap the component in Framer Motion's AnimatePresence. This Skill implements AnimatePresence to ensure elements gracefully fade and scale out of the DOM during modal closures or list removals.

Scroll-triggered reveals in a Next.js app are best created using viewport detection for progressive content reveals. This Skill configures Framer Motion to animate elements as they enter the screen, perfect for staggered dashboard card entrances.

To make Framer Motion animations accessible, respect reduced-motion preferences using the useReducedMotion hook. This Skill integrates accessibility checks to disable or adjust animations for users who prefer reduced motion.

Framer Motion layout animations cause performance issues when animating layout properties instead of GPU-friendly transforms and opacity. This Skill prioritizes transform and opacity properties to maintain smooth 60fps transitions.