Framer Motion

Platform: Web only. For mobile animations, see the react-native-reanimated skill.

Overview

Animation patterns for React using Framer Motion 12.x. Provides declarative animations, gesture handling, layout transitions, and page animations with performance and accessibility built-in.

Install: pnpm add framer-motion

Workflows

Adding animations:

1. Import motion component: import { motion } from 'framer-motion'
2. Replace element with motion variant: <div> → <motion.div>
3. Add animation props: initial, animate, transition
4. Test with reduced motion enabled
5. Verify 60fps performance in DevTools