스킬 자체의 표현으로
저렴한 속성을 선택하고 레이아웃 작업을 피함으로써 애니메이션을 부드러운 60fps로 유지하기 위한 공식 GSAP 가이드입니다. width, height, top, left, margin, padding 대신 transform 키(x, y, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY)와 opacity를 애니메이션하도록 안내하며, will-change는 실제로 애니메이션되는 요소에만 CSS로 지정하고, 레이아웃 스래싱을 막기 위해 모든 DOM 읽기를 쓰기 전에 수행하도록 합니다.
배칭 가이드에서는 수동 딜레이 트윈 대신 stagger를 사용하는 방법, 긴 목록에 대한 가상화, 마우스 팔로워를 위한 gsap.quickTo(), 디바운스된 ScrollTrigger.refresh()를 활용한 pin 및 scrub 조정, 화면 밖 트윈 종료를 다룹니다. 이는 GSAP 애니메이션을 새로 만드는 것이 아니라 기존 애니메이션을 조정하는 디자이너와 개발자를 위한 것입니다.
산출물
- 애니메이션 대상 요소의 CSS에 추가할 will-change 선언입니다.
- 컨테이너의 mousemove 리스너로 구동되는, x와 y에 대한 gsap.quickTo() 설정입니다.
작동 방식
- 01컴포지터 친화적 속성 애니메이션하기
애니메이션을 transform 키와 opacity로 제한하여 레이아웃과 페인트를 유발하지 않고 컴포지터에서 작업이 처리되도록 합니다.
- 02GSAP이 쓰기를 배칭하도록 두기
GSAP은 이미 내부적으로 업데이트를 배칭하므로, 위험은 그 주변에서 읽기와 쓰기를 섞어 사용하는 자신의 DOM 코드에 있습니다.
- 03자주 변하는 값에는 트윈 하나를 재사용하기
포인터가 움직일 때마다 업데이트되는 속성의 경우, gsap.quickTo()는 업데이트마다 새 트윈을 할당하는 대신 하나의 트윈을 계속 유지합니다.
- 04스크롤 기반 작업 제어하기
scrub: 1과 같은 작은 scrub 값은 스크롤 중 수행되는 작업을 줄일 수 있지만, 파일에서는 이 설정을 저사양 기기에서 테스트하도록 권장합니다.
- 05보이지 않는 애니메이션 정지하기
예를 들어 사용자가 해당 섹션에서 벗어났을 때, 화면 밖의 비활성 애니메이션을 일시 정지하거나 종료합니다.