Framer Motion을 사용한 전환, 스크롤 애니메이션, 레이아웃 애니메이션을 지원하는 스킬입니다.
skills - Framer Motion 애니메이션란 무엇인가요?
이 스킬은 React 프로젝트에서 Framer Motion을 활용한 고성능 애니메이션을 구현하는 방법을 제공합니다. 개발자는 `motion.div` 컴포넌트와 `initial`, `animate`, `exit` props를 사용하여 요소의 마운트/언마운트 애니메이션을 쉽게 정의할 수 있습니다. `AnimatePresence`는 조건부 렌더링 시 부드러운 전환을 보장하며, `layout` prop을 통해 자동 레이아웃 애니메이션(재정렬, 크기 변경)을 지원합니다. 스크롤 애니메이션은 `useScroll()`과 `useTransform()` 훅을 결합하여 패럴랙스 효과와 스크롤 트리거 등장을 구현하며, `useReducedMotion()` 훅을 통해 접근성 요구사항인 `prefers-reduced-motion`을 존중합니다. 성능 최적화를 위해 `transform`과 `opacity` 속성만 애니메이션하고, UI 전환은 200-400ms, 페이지 전환은 400-800ms의 짧은 지속 시간을 권장합니다. 자식 요소의 지연 애니메이션은 `variants`의 `staggerChildren`을 사용하여 리스트 애니메이션을 구현합니다.