Framer Motion: React에서 강력한 애니메이션 라이브러리

📌 Framer Motion: React에서 강력한 애니메이션 라이브러리

---

1️⃣ Framer Motion이란?

Framer Motion은 React에서 쉽게 애니메이션을 적용할 수 있도록 해주는 라이브러리입니다.
CSS 애니메이션이나 react-transition-group보다 더 간단하고 강력한 기능을 제공합니다.
✅ 자연스러운 모션
✅ 다양한 트랜지션 효과
✅ whileHover, whileTap 등과 같은 직관적인 API
✅ Variants를 활용한 애니메이션 그룹 관리

👉 framer-motion을 사용하면 코드가 깔끔해지고 유지보수가 쉬워집니다.

---

2️⃣ Framer Motion 설치

프로젝트에서 framer-motion을 사용하려면 먼저 설치해야 합니다.

npm install framer-motion

설치가 완료되면 React에서 motion을 사용하여 애니메이션을 쉽게 적용할 수 있습니다.

---

3️⃣ Framer Motion 기본 사용법

Framer Motion은 기존의 HTML 태그 대신 motion을 사용하여 애니메이션을 적용합니다.

✅ 1) 기본적인 애니메이션 적용

import { motion } from 'framer-motion';

<motion.div 
  animate={{ opacity: 1 }} 
  initial={{ opacity: 0 }} 
  transition={{ duration: 1 }}
>
  안녕하세요! 🎉
</motion.div>

✅ initial={{ opacity: 0 }} → 처음에는 투명
✅ animate={{ opacity: 1 }} → 점점 보이게
✅ transition={{ duration: 1 }} → 1초 동안 실행

---

4️⃣ 버튼 애니메이션 적용 (질문 코드 활용)

<motion.button 
  className="faq-button" 
  onClick={openKakaoChat}
  whileHover={{ scale: 1.05 }} // 버튼에 마우스를 올리면 커짐
  whileTap={{ scale: 0.95 }} // 버튼을 클릭하면 작아짐
>
  직접 문의하기
</motion.button>

✅ whileHover={{ scale: 1.05 }} → 마우스를 올리면 크기가 1.05배 커짐
✅ whileTap={{ scale: 0.95 }} → 클릭 시 크기가 0.95배로 작아짐
✅ 추가로 opacity, rotate 등 다양한 속성을 적용 가능!

---

5️⃣ Variants를 활용한 애니메이션 관리

variants를 사용하면 여러 개의 애니메이션을 한 곳에서 관리할 수 있습니다.

import { motion } from 'framer-motion';

const buttonVariants = {
  hover: { scale: 1.1, backgroundColor: "#ff0000" },
  tap: { scale: 0.9 }
};

<motion.button
  className="faq-button"
  variants={buttonVariants}
  whileHover="hover"
  whileTap="tap"
>
  애니메이션 버튼
</motion.button>

✅ variants를 사용하면 애니메이션을 그룹화할 수 있어 재사용성이 높아짐!

---

6️⃣ 리스트 애니메이션 (Staggered Animation)

여러 개의 요소를 순차적으로 등장하게 만들 수도 있습니다.

const listVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { staggerChildren: 0.2 } }
};

<motion.ul initial="hidden" animate="visible" variants={listVariants}>
  <motion.li variants={listVariants}>아이템 1</motion.li>
  <motion.li variants={listVariants}>아이템 2</motion.li>
  <motion.li variants={listVariants}>아이템 3</motion.li>
</motion.ul>

✅ staggerChildren: 0.2 → 0.2초 간격으로 리스트 아이템이 순차적으로 등장!

---

7️⃣ Page Transition (페이지 전환 애니메이션)

페이지 전환 시 framer-motion을 활용하여 자연스러운 애니메이션을 추가할 수도 있습니다.

import { motion } from 'framer-motion';
import { useLocation } from 'react-router-dom';

const pageVariants = {
  initial: { opacity: 0, x: "-100vw" },
  animate: { opacity: 1, x: 0 },
  exit: { opacity: 0, x: "100vw" }
};

function PageTransition({ children }) {
  return (
    <motion.div
      initial="initial"
      animate="animate"
      exit="exit"
      variants={pageVariants}
      transition={{ duration: 0.5 }}
    >
      {children}
    </motion.div>
  );
}

✅ React Router와 함께 사용하면 페이지 전환 애니메이션을 쉽게 적용 가능!

---

🔥 Framer Motion 요약

기능 설명 코드 예시

animate	상태 변화 애니메이션 적용	animate={{ opacity: 1 }}
initial	초기 상태 설정	initial={{ opacity: 0 }}
transition	애니메이션 지속 시간 조절	transition={{ duration: 1 }}
whileHover	마우스 올릴 때 효과	whileHover={{ scale: 1.1 }}
whileTap	클릭 시 효과	whileTap={{ scale: 0.9 }}
variants	여러 개의 애니메이션 그룹화	whileHover="hover"
staggerChildren	리스트 애니메이션	staggerChildren: 0.2

---

🚀 마무리

✅ framer-motion을 사용하면 자연스럽고 강력한 애니메이션을 쉽게 구현할 수 있습니다.
✅ 기존 CSS 애니메이션보다 훨씬 간결한 코드로 작성 가능!
✅ whileHover, whileTap, variants 등을 활용하여 더 직관적인 애니메이션 추가 가능!

React에서 애니메이션을 적용하고 싶다면, framer-motion을 꼭 사용해보세요! 🚀🎨