스크롤 트리거

1. cdn css, js 둘 다 설치해야함
2. 해당 코드 : scroll 영역에 나타났을 때 초기값 0에서 var 값 만큼 늘어나는 효과이다.

<script>
  gsap.registerPlugin(ScrollTrigger);

  var startCount1 = { var: 0 };
  var startCount2 = { var: 0 };
  var startCount3 = { var: 0 };

  gsap.to(startCount1, {
    var: 100,
    duration: 2,
    ease: "none",
    onUpdate: () => {
      document.getElementById("number").innerText = startCount1.var.toFixed();
    },
    scrollTrigger: {
      trigger: ".company__overview",
      start:"center center",
      end : "bottom center",
      toggleActions: "restart pause restart none",      
    }
  });

  gsap.to(startCount2, {
    var: 200,
    duration: 2,
    ease: "none",
    onUpdate: () => {
      document.getElementById("number2").innerText = startCount2.var.toFixed();
    },
    scrollTrigger: {
      trigger: ".company__overview",
      start:"center center",
      end : "bottom center",
      toggleActions: "restart pause restart none",      
    }
  });

  gsap.to(startCount3, {
    var: 26,
    duration: 2,
    ease: "none",
    onUpdate: () => {
      document.getElementById("number3").innerText = startCount3.var.toFixed();
    },
    scrollTrigger: {
      trigger: ".company__overview",
      start:"center center",
      end : "bottom center",
      toggleActions: "restart pause restart none",
    }
  });
  </script>

gsap 애니메이션 재시작

[<https://velog.io/@kimheewon/GSAP-ScrollTrigger-2>](<https://velog.io/@kimheewon/GSAP-ScrollTrigger-2>)