Animation & Transition Patterns

Smooth animations in React: Framer Motion patterns, React Spring, layout animations, gesture handling, and performance-optimized animations for production applications.

🎬 1. Framer Motion Patterns

✨ Want your React app to feel alive? Framer Motion makes animations so easy it's almost cheating! 🎮 Declarative syntax, buttery-smooth transitions, layout animations, and drag gestures — all with excellent performance out of the box. Your users will think you're a wizard! 🧙‍♂️💫

🟠 Impact: HIGH — Smooth animations are the secret sauce that makes apps feel polished and professional!

📋 In this section: Basic motion components • Layout animations • Gesture handling (drag) • Enter/exit transitions

tsx

// ✅ Basic animations
import { motion } from 'framer-motion';

function AnimatedBox() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.3 }}
    >
      Content
    </motion.div>
  );
}

// ✅ Layout animations
function LayoutAnimation() {
  return (
    <motion.div layout>
      <motion.h2 layout>Title</motion.h2>
      <motion.p layout>Content</motion.p>
    </motion.div>
  );
}

// ✅ Gesture handling
function DraggableCard() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
      whileDrag={{ scale: 1.1 }}
      onDragEnd={(event, info) => {
        console.log('Drag ended', info.point);
      }}
    >
      Drag me
    </motion.div>
  );
}

Animation & Transition Patterns

Smooth animations in React: Framer Motion patterns, React Spring, layout animations, gesture handling, and performance-optimized animations for production applications.

🎬 1. Framer Motion Patterns

🟠 Impact: HIGH — Smooth animations are the secret sauce that makes apps feel polished and professional!

📋 In this section: Basic motion components • Layout animations • Gesture handling (drag) • Enter/exit transitions

tsx

// ✅ Basic animations
import { motion } from 'framer-motion';

function AnimatedBox() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.3 }}
    >
      Content
    </motion.div>
  );
}

// ✅ Layout animations
function LayoutAnimation() {
  return (
    <motion.div layout>
      <motion.h2 layout>Title</motion.h2>
      <motion.p layout>Content</motion.p>
    </motion.div>
  );
}

// ✅ Gesture handling
function DraggableCard() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
      whileDrag={{ scale: 1.1 }}
      onDragEnd={(event, info) => {
        console.log('Drag ended', info.point);
      }}
    >
      Drag me
    </motion.div>
  );
}