GSAP 성능 최적화은(는) 무엇을 하나요?
이 스킬을 사용해야 하는 경우
GSAP 애니메이션을 부드러운 60fps로 최적화하거나, layout/paint 비용을 줄이거나, 사용자가 성능, 끊김 현상, 빠른 애니메이션 모범 사례에 대해 물을 때 적용하세요.
관련 스킬: gsap-core(transform, autoAlpha) 및 gsap-timeline으로 애니메이션 구축하기, ScrollTrigger 성능은 gsap-scrolltrigger 참조.
Transform과 Opacity 선호
transform(x, y, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY)과 opacity를 애니메이션하면 compositor에서 작업이 유지되어 layout과 대부분의 paint를 피합니다. 동일한 효과를 transform으로 얻을 수 있다면 layout-heavy 속성을 애니메이션하지 마세요.
- ✅ 선호: x, y, scale, rotation, opacity.
- ❌ 가능하면 피할 것: width, height, top, left, margin, padding (layout을 유발하고 끊김 현상을 일으킬 수 있음).
GSAP의 x와 y는 기본적으로 transform(translate)을 사용하므로 움직임을 위해 left/top 대신 사용하세요.
will-change
애니메이션되는 요소의 CSS에 will-change를 사용하세요. 브라우저에 레이어를 승격하도록 힌트를 줍니다.
will-change: transform;
읽기와 쓰기 배칭
GSAP은 내부적으로 업데이트를 배칭합니다. GSAP과 직접적인 DOM 읽기/쓰기 또는 layout 종속 코드를 혼합할 때, 반복적인 layout thrashing을 유발하는 방식으로 읽기와 쓰기를 번갈아 사용하지 마세요. 모든 읽기를 먼저 수행한 다음 모든 쓰기를 수행하거나(또는 GSAP이 쓰기를 한 번에 처리하도록 하세요).
많은 요소 (Stagger, 리스트)
- 동일한 애니메이션의 경우 수동 지연이 있는 여러 개별 트윈 대신 stagger를 사용하세요. 더 효율적입니다.
- 긴 리스트의 경우 가상화를 고려하거나 보이는 항목만 애니메이션하세요. 끊김 현상을 유발한다면 수백 개의 동시 트윈 생성을 피하세요.
- 가능하면 타임라인을 재사용하세요. 모든 프레임에서 새 타임라인을 생성하지 마세요.
자주 업데이트되는 속성 (예: 마우스 팔로워)
자주 업데이트되는 속성(예: 마우스 팔로워 x/y)에는 gsap.quickTo() 를 선호하세요. 각 업데이트마다 새 트윈을 생성하는 대신 단일 트윈을 재사용합니다.
let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });
document.querySelector("#container").addEventListener("mousemove", (e) => {
xTo(e.pageX);
yTo(e.pageY);
});
ScrollTrigger와 성능
- pin: true는 고정된 요소를 승격합니다. 필요한 것만 고정하세요.
- scrub을 작은 값(예:
scrub: 1)으로 설정하면 스크롤 중 작업을 줄일 수 있습니다. 저사양 기기에서 테스트하세요. - layout이 실제로 변경될 때(예: 콘텐츠 로드 후)에만 ScrollTrigger.refresh() 를 호출하고 모든 리사이즈마다 호출하지 마세요. 가능하면 디바운스하세요.
동시 작업 줄이기
- 화면 밖 또는 비활성 애니메이션은 사용자가 볼 수 없을 때(예: 사용자가 다른 곳으로 이동할 때) 일시 중지 또는 제거하세요.
- 많은 요소에 대해 동시에 너무 많은 속성을 애니메이션하지 마세요. 필요한 경우 단순화하거나 순차적으로 실행하세요.
모범 사례
- ✅ transform과 opacity를 애니메이션하고, 애니메이션되는 요소에만 CSS에서 will-change를 사용하세요.
- ✅ 동일한 애니메이션의 경우 수동 지연이 있는 많은 개별 트윈 대신 stagger를 사용하세요.
- ✅ 자주 업데이트되는 속성(예: 마우스 팔로워)에는 gsap.quickTo() 를 사용하세요.
- ✅ 화면 밖 애니메이션을 정리하거나 제거하세요. layout이 변경될 때 ScrollTrigger.refresh() 를 호출하고 가능하면 디바운스하세요.
하지 말아야 할 것
- ❌ 동일한 외관을 얻을 수 있을 때 width/height/top/left를 애니메이션하지 마세요. 대신 x/y/scale을 사용하세요.
- ❌ "만약을 대비해" 모든 요소에 will-change 또는 force3D를 설정하지 마세요. 실제로 애니메이션되는 요소에만 사용하세요.
- ❌ 저사양 기기에서 테스트하지 않고 수백 개의 겹치는 트윈 또는 ScrollTrigger를 생성하지 마세요.
- ❌ 정리를 무시하지 마세요. 방치된 트윈과 ScrollTrigger는 계속 실행되어 성능과 정확성을 해칠 수 있습니다.