React 애니메이션 ✅ Framer Motion으로 부드럽고 감성적인 UI 만들기

 

 

React 프로젝트에서 자연스러운 애니메이션을 구현하고 싶다면
CSS transition이나 GSAP보다 먼저 고려해야 할 라이브러리, 바로 Framer Motion입니다.

 

Next.js, CRA, Remix 등 어떤 React 환경에서도 쉽게 동작하고,
상태 변화 → 애니메이션 전환을 아주 직관적으로 다룰 수 있죠.

---

⚙️ 1. 설치 및 기본 세팅

 

npm install framer-motion

 

기본 Import:

 

import { motion } from "framer-motion";

---

🧩 2. 기본 애니메이션 예제

 

import { motion } from "framer-motion";

export default function BasicBox() {
  return (
    <motion.div
      initial={{ opacity: 0, y: -20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      style={{
        width: "150px",
        height: "150px",
        background: "#4dabf7",
        borderRadius: "10px",
        margin: "40px auto",
      }}
    />
  );
}

 

📌 실행 흐름

• initial: 초기 상태
• animate: 최종 상태
• transition: 전환 시간 / 속도

💡 CSS 없이도 부드러운 모션 구현 가능

---

✨ 3. Hover & Tap 인터랙션

 

<motion.button
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 300 }}
>
  버튼 클릭
</motion.button>

 

📌 whileHover, whileTap 등 사용자 이벤트 기반 모션

 

→ 버튼, 카드, 이미지 hover 효과 등에 자주 사용

---

🔄 4. 애니메이션 상태 전환 (variants)

 

const boxVariants = {
  hidden: { opacity: 0, x: -50 },
  visible: { opacity: 1, x: 0 },
};

export default function VariantBox() {
  return (
    <motion.div
      variants={boxVariants}
      initial="hidden"
      animate="visible"
      transition={{ duration: 0.6 }}
      className="box"
    >
      변형 애니메이션
    </motion.div>
  );
}

 

📌 variants로 여러 상태를 묶어서 관리하면,
복잡한 UI 전환도 깔끔하게 제어 가능 👏

---

📦 5. 리스트 등장 애니메이션

 

const list = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.2 },
  },
};

const item = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
};

export default function ListMotion() {
  return (
    <motion.ul variants={list} initial="hidden" animate="visible">
      {[1, 2, 3].map((num) => (
        <motion.li key={num} variants={item}>
          항목 {num}
        </motion.li>
      ))}
    </motion.ul>
  );
}

 

📌 staggerChildren: 자식 요소 등장 간격 제어 → 리스트나 카드 애니메이션에 최적

---

💨 6. 페이지 전환 애니메이션 (Next.js 활용 예시)

 

<motion.div
  key={router.asPath}
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
  transition={{ duration: 0.4 }}
>
  <Component {...pageProps} />
</motion.div>

 

📌 Next.js의 Layout 컴포넌트에 적용하면
페이지 이동 시 부드러운 페이드 인/아웃 효과 완성

---

🎨 7. 실무에서 자주 쓰는 효과 패턴

효과	설정	설명
Fade In	opacity	등장 애니메이션 기본형
Slide In	x, y	방향성 있는 전환
Scale Up	scale	카드, 이미지 강조
Rotate	rotate	로딩, 스피너
Stagger	staggerChildren	리스트 순차 등장

---

⚡ 8. Framer Motion 고급 옵션

 

transition={{
  type: "spring", // 탄성 효과
  stiffness: 200,
  damping: 20,
}}

 

📌 spring 타입을 쓰면 더 자연스럽고 물리적인 애니메이션 구현 가능 💫

---

🧠 9. 실무 활용 팁

✅ motion.div는 CSS 클래스와 함께 사용 가능
✅ 상태 기반 전환은 variants로 묶어서 관리
✅ 페이지 애니메이션은 AnimatePresence로 제어
✅ React Query, Zustand 등과 연계해 “데이터 변화 시 모션”도 가능

---

📝 마무리 정리

• motion.div로 애니메이션 기본 단위 구성
• whileHover, variants, staggerChildren으로 UX 향상
• Framer Motion = React 애니메이션의 표준 라이브러리
• CSS 애니메이션보다 유지보수성, 인터랙션 표현력이 훨씬 뛰어남 ⚡