motion

SKILL.md

Motion (package: motion, formerly framer-motion) is the industry-standard React animation library used in production by thousands of applications. With 30,200+ GitHub stars and 300+ official examples, it provides a declarative API for creating sophisticated animations with minimal code.

Production Tested: React 19, Next.js 16, Vite 7, Tailwind v4

Performance: Uses native ScrollTimeline API when available for hardware acceleration.

선언적 애니메이션, 제스처(드래그, 호버, 탭), 스크롤 효과, 스프링 물리학, 레이아웃 애니메이션 및 SVG 조작 등 Motion(이전의 Framer Motion)을 사용하여 정교한 React 애니메이션을 구축하세요. LazyMotion(4.6KB) 또는 Animate mini(2.3KB)를 사용하여 번들 크기를 최적화하세요. 사용 시기: 드래그 앤 드롭 상호 작용 추가, 스크롤 트리거 애니메이션 생성, 전환이 포함된 모달 대화 상자 구현, 모멘텀이 있는 캐러셀 구축, 페이지/경로 전환 애니메이션, 시차 히어로 섹션 생성, 부드러운 확장/축소로 아코디언 구현 또는 애니메이션 번들 크기 최적화. 간단한 목록 애니메이션의 경우 대신 자동 애니메이션 기술을 사용하세요(3.28KB 대 34KB). 문제 해결: AnimatePresence 종료가 작동하지 않음, 큰 목록 성능 문제, Tailwind 전환 충돌, Next.js "클라이언트 사용" 오류, 스크롤 가능한 컨테이너 레이아웃 문제 또는 Cloudflare Workers 빌드 오류(2024년 12월 해결됨). 출처: joaquimcassano/ideas-marketplace.

원본 보기