Framer Motion Animations That Don't Kill Performance: Patterns and Pitfalls

Framer Motion Animations That Don't Kill Performance: Patterns and Pitfalls Framer Motion makes animations easy. It also makes performance problems easy. Here's how to get smooth 60fps without the jank. The Golden Rule: Animate Transform and Opacity Only // Bad — triggers layout recalculation (expensive) <motion.div animate={{ width: '200px', height: '100px', left: '50px' }} /> // Good — GPU-composited, no layout (cheap) <motion.div animate={{ x: 50, scale: 1.1, opacity: 0.8 }} /> Properties that trigger layout: width, height, top, left, padding, margin. Properties that don't: x, y, scale, rotate, opacity, skew. Entry Animations const fadeUp = { hidden: { opacity: 0, y: 24 }, visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: 'easeOut' }, }, } function Card({ children }: { children: React.ReactNode }) { return ( <motion.div variants={fadeUp} initial="hidden" whileInView="visible" viewport={{ once: true }} // only animate once, not on scroll back > {childr