Motion (Framer Motion) — React 애니메이션의 정석

기본 애니메이션

import { motion } from "motion/react";

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

레이아웃 애니메이션

{items.map(item => (
  <motion.div
    key={item.id}
    layout  // 위치 변경 시 자동 애니메이션
    layoutId={item.id}
  >
    {item.title}
  </motion.div>
))}

AnimatePresence로 컴포넌트 마운트/언마운트 애니메이션도 가능합니다.