성능 저하 없는 Framer Motion 애니메이션: 패턴과 주의사항
(dev.to)
Framer Motion을 사용하여 성능 저하(Jank) 없이 60fps의 부드러한 애니메이션을 구현하는 최적화 패턴을 설명합니다. 레이아웃 재계산을 유발하는 속성 대신 GPU 가속이 가능한 속성을 사용하고, 접근성과 효율성을 고려한 구체적인 구현 방법을 제시합니다.
이 글의 핵심 포인트
- 1애니메이션 시 width, height 대신 transform(x, y, scale)과 opacity 사용 권장
- 2viewport={{ once: true }} 설정을 통해 스크롤 시 반복되는 애니메이션 방지
- 3