예제
<script>
// article2의 ul의 li들을 순차적으로 보이게 하는 함수
function artticle2_ul() {
let ctx = gsap.context(() => {
const liElements = gsap.utils.toArray('#featured_products_section ul li');
liElements.forEach((li, index) => {
gsap.set(li, {willChange: 'transform, opacity'});
gsap.fromTo(
li,
{ autoAlpha: 0, y: 50 }, // 처음에는 투명하고 아래에 위치
{
autoAlpha: 1,
y: 0,
duration: 0.8,
ease: 'power2.out',
scrollTrigger: {
trigger: li,
start: 'top 80%', // li 요소가 화면의 80% 위치에 도달하면 실행
//toggleActions: 'play none none reverse',
scrub: .5,
markers: false,
onEnter: () => {
li.style.willChange = "transform, opacity";
},
onEnterBack: () => {
li.style.willChange = "transform, opacity";
},
onLeave: () => {
li.style.removeProperty("will-change");
},
onLeaveBack: () => {
li.style.removeProperty("will-change");
},
}
});
});
});
return () => ctx.revert();
}
</script>🚀 gsap.context()의 핵심 기능
컨텍스트 내에서 실행된 모든 GSAP 애니메이션을 추적
ctx.revert()를 실행하면 모든 애니메이션을 한 번에 제거 가능
반복적으로 실행될 때 중복 애니메이션을 방지
SPA(React, Vue)처럼 페이지가 변경될 때 안전하게 제거 가능
즉
1️⃣ ctx.revert()로 모든 애니메이션 한 번에 정리
gsap.context() 내부에서 실행된 모든 애니메이션이 ctx에 저장됨.
ctx.revert()를 실행하면 이전에 실행된 모든 애니메이션이 제거됨.
2️⃣ 중복 실행 방지
만약 artticle2_ul()이 여러 번 실행되면, 기존 애니메이션이 남아있을 수 있음.
gsap.context()를 사용하면 기존 애니메이션을 정리하고 새로 실행하므로, 중복 실행이 방지됨.
3️⃣ 메모리 관리 최적화
gsap.context()를 사용하지 않으면, 애니메이션이 실행된 후에도 남아 있을 수 있음.
ctx.revert()를 사용하면 필요할 때만 실행되고, 필요 없을 때 삭제할 수 있음.
특히 SPA(React, Vue) 환경에서 페이지 이동 시 애니메이션을 안전하게 제거할 수 있음
💡 왜 좋은 최적화인가?
1️⃣ gsap.context()를 활용한 깔끔한 애니메이션 관리
gsap.context() 내부에서 실행된 애니메이션은 그 컨텍스트 내에서만 유효
애니메이션이 여러 번 실행되더라도 기존 애니메이션이 남아 있지 않음
중복 실행 방지! (ctx.revert()가 기존 애니메이션을 정리해줌)
2️⃣ ctx.revert()를 활용한 애니메이션 메모리 관리
한 번 실행된 애니메이션이 남아 있으면 메모리 누수 및 성능 저하 발생 가능
return () => ctx.revert();를 통해 이전 애니메이션을 제거하고 새로 적용
특히 SPA(React, Vue) 같은 환경에서도 페이지 이동 시 안전하게 애니메이션 제거 가능
결론
즉, gsap을 쓸 때 여러 요인에 의해서 scrollTrigger가 여러 번 생성된다거나, 중첩이 될 수 있음
이를 위해 gsap.context로 묶어서 return값으로 revert를 한 걸 각 함수로 묶어 쓴다면, 함수가 재실행 될때마다 초기화를 진행하기 때문에 중첩될 일이 없기 때문에 메모리 최적화를 할 수 있음.
특히 이는 react를 써서 페이지가 변경될 경우 더욱이 중요하게 될 가능성이 높음.
2편
