[Library] motion-one 🆚 framer-motion 🆚 GSAP

항목	motion-one	framer-motion	GSAP
목적	Web Animations API 기반 경량 애니메이션 라이브러리	React용으로 최적화된 선언적 애니메이션 라이브러리	범용 애니메이션 라이브러리 (ScrollTrigger, Timeline 등 강력한 기능 포함)
크기	매우 작음 (~3KB)	중간 (~30KB)	비교적 큼 (~60KB 이상)
React 친화성	기본은 낮음 (DOM 기반), @motionone/react로 React 사용 가능	매우 좋음 (<motion.div>, variants 등)	낮음 (React 비지원, DOM 직접 제어 위주)
스크롤 애니메이션	수동 구현 필요 (inView, animate 직접 설정)	기본 제공 (whileInView, 간단한 트리거만 가능)	매우 강력 (ScrollTrigger, scrub, pin, timeline 등 지원)
타입 안정성 (TS)	낮음 (직접 단언 필요, 타입 자동 추론 약함)	높음 (정적 타입 추론 우수, 제네릭 기반 API)	보통 (TS 지원은 있지만 DOM 접근 시 단언 필요)
복잡한 타이밍/트리거	제한적 (keyframes + delay 등 수동 조합 필요)	중간 (variants, custom controls로 제한적 구현 가능)	매우 강력 (timeline, label, ScrollTrigger 등 세부 제어 가능)
러닝 커브	낮음 (단순한 문법, 기본적인 DOM 애니메이션 위주)	중간 (고급 기능은 학습 필요: variants, layout animations 등)	높음 (timeline, ScrollTrigger 등 숙련 필요)

✅ 라이브러리 선택 기준

• 간단한 애니메이션 + React 친화성 ➡️ framer-motion
  e.g. 컴포넌트 마운트/언마운트, 슬라이드, 페이드 효과 등

• 고성능 + Scroll 기반 트리거 세부 제어 + 정교한 타이밍 제어 필요 ➡️ GSAP
  e.g. 스크롤 연동 애니메이션, 복잡한 시퀀스 애니메이션

• 가볍고 단순한 애니메이션만 필요 + 번들 크기 중요 ➡️ motion-one
  e.g. 간단한 hover/fade in, 프레임워크 독립형 애니메이션

📜 공식 문서

• motion-one
• framer-motion
• GSAP