framer-motion

The framer-motion skill provides expert guidelines for building performant animations with the Framer Motion / Motion library in React and TypeScript applications. It solves the problem of writing animations that stay smooth and maintainable by codifying best practices around correct imports, hardware acceleration, variants, gestures, scroll effects, exit animations, and accessibility. Notably it emphasizes that the library was renamed from Framer Motion to Motion, so imports should use "motion/react" rather than the outdated "framer-motion".

The guidelines take a performance-first approach: animate transform properties (x, y, scale, rotate) and opacity because they can be hardware-accelerated and don't trigger layout recalculations, and avoid animating layout-shifting properties like width, height, top, left, margin, and padding. It shows how to use will-change properly for transform, opacity, filter, clipPath, and backgroundColor, how to define variants for complex and staggered animations, layoutId for shared element transitions, and spring transitions with stiffness and damping for natural motion. React integration tips include memoizing variants with useMemo, memoizing callbacks with useCallback, and avoiding inline style objects that create new objects on every render. Additional sections cover gesture props (whileHover, whileTap), scroll-linked animations with useScroll and useTransform, exit animations with AnimatePresence, and page transition patterns.

This skill targets React developers building animated interfaces who want smooth, accessible motion. It stresses respecting reduced motion preferences via the useReducedMotion hook, disabling or shortening animations when a user prefers reduced motion. For performance debugging it recommends React DevTools to inspect re-renders, the Chrome DevTools Performance tab to identify jank, targeting 60fps minimum (120fps on high refresh displays), and testing on actual devices, especially mid-range Android phones. The skill is a set of code-backed guidelines rather than an automated tool.