tutorial
Framer Motion 완벽 가이드: React 애니메이션 마스터하기
Framer Motion으로 부드럽고 인터랙티브한 React 애니메이션을 구현하는 방법. variants, gestures, scroll animations 등 핵심 기능을 마스터하세요.
럿지 AI 팀2025-01-1515min read
FPS
부드러운 애니메이션
KB
번들 크기
+
프리셋 애니메이션
M+
주간 다운로드
Framer Motion 핵심 개념
🎬
motion 컴포넌트
motion.div로 애니메이션 가능 요소 생성
✨
animate 속성
최종 애니메이션 상태 정의
🚀
initial 속성
시작 애니메이션 상태 정의
📦
variants
재사용 가능한 애니메이션 세트
자주 쓰는 애니메이션
자주 쓰는 애니메이션
Fade Inopacity: 0 → 1
Slide Upy: 50 → 0, opacity: 0 → 1
Scalescale: 0 → 1
Rotaterotate: 0 → 360
Springtype: "spring", stiffness: 100
고급 기능
AnimatePresence
언마운트 시 exit 애니메이션
useScroll
스크롤 기반 애니메이션
useDragControls
드래그 앤 드롭 제스처
LayoutGroup
레이아웃 변경 애니메이션
useInView
뷰포트 진입 감지
useMotionValue
애니메이션 값 추적
성능 최적화 팁
☑transform 속성만 애니메이션
☑layout 속성 신중하게 사용
☑will-change 자동 적용 활용
☑useReducedMotion 접근성 고려
☑lazy motion으로 번들 최적화
☑GPU 가속 속성 사용
React 애니메이션 마스터하기
Motion 공식 문서#Framer Motion
#React
#Animation
#Frontend
#UI/UX