9.4 Header part Four

animate="scroll" vs animate={navAnimation} 차이

✅ framer-motion animate="상태" vs animate={useAnimation()} 차이 정리

1. 기본 개념

비교 항목	animate="scroll"	animate={navAnimation}
타입	문자열 (string)	애니메이션 컨트롤러 객체
동작 방식	고정된 상태만 사용	조건에 따라 상태 전환 가능
상태 변경	자동	프로그래밍적으로 수동 조절 (start())
사용 예	단순한 애니메이션	스크롤, 클릭 등 사용자 상호작용에 따른 동적 제어

---

2. 코드 비교 예시

💡 animate="scroll": 단순 애니메이션

<motion.div
  variants={{
    initial: { backgroundColor: "blue" },
    scroll: { backgroundColor: "black" },
  }}
  initial="initial"
  animate="scroll"  // 고정된 상태
>
  정적인 애니메이션
</motion.div>

---

💡 animate={useAnimation()}: 조건 기반 애니메이션

const controls = useAnimation();
const { scrollY } = useViewportScroll();

useEffect(() => {
  scrollY.onChange(() => {
    if (scrollY.get() > 100) {
      controls.start("scrolled");
    } else {
      controls.start("top");
    }
  });
}, [scrollY, controls]);

return (
  <motion.div
    variants={{
      top: { backgroundColor: "blue" },
      scrolled: { backgroundColor: "black" },
    }}
    initial="top"
    animate={controls} // 컨트롤 객체 사용
  >
    스크롤에 따라 동적으로 색 변경됨
  </motion.div>
);

---

3. 📌 언제 useAnimation()을 쓰면 좋을까?

상황	설명
✅ 스크롤 위치에 따라 배경색, 위치 등을 바꾸고 싶을 때	ex. 헤더가 스크롤 시 투명 → 검정 배경으로 바뀌는 효과
✅ 클릭 또는 사용자 동작으로 애니메이션이 바뀌어야 할 때	ex. 검색 버튼 클릭 시 input 창이 확장되는 효과
✅ 여러 애니메이션을 동시에 제어해야 할 때	ex. 다수 컴포넌트 상태를 하나의 조건으로 제어할 때
✅ 타이밍을 조절하거나 상태를 연속 전환할 때	ex. 특정 조건이 만족될 때마다 .start()로 흐름 제어

---

🧠 마무리 정리

• 단순히 "들어올 때 한번만 실행"되는 애니메이션이면 animate="상태"로 충분합니다.
• 하지만 사용자 입력, 조건문, 여러 상태에서 제어해야 할 때는 반드시 useAnimation()을 사용하는 것이 유리합니다.