gsap에서 will-change와 x, y값, transform, top,left 값 - gsap 최적화(3)

애니메이션이 많을 경우 will-change: transform, opacity 적용

브라우저가 미리 최적화할 수 있도록 도와줌.
하지만 모든 요소에 적용하면 성능 저하 가능 → 애니메이션이 자주 발생하는 요소에만 적용.

transform을 쓰고 left top을 그만 쓰자.

GSAP에서는 x, y를 사용하면 성능에 문제 없음,

transform: translate()를 활용하므로 레이아웃 변화를 최소화함
하지만 left, top은 Reflow를 유발하므로 사용하지 않는 게 좋음.

will-change도 css상으로 주는것도 좋지만, animate가 끝나면 will-change를 auto로 바뀌게 하는것도 방법인 듯.

예제

<script>
	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이 좋다 걍.. 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>