gsap scrollTrigger

gsap scrollTrigger란 무엇인가?

애니메이션을 만들다 보면, scroll 위치에 맞춰서 애니메이션을 실행시키고 싶은 경우가 많습니다. 모바일이 강세인 요즘, 모바일에서 interactive 한 애니메이션을 보여줄 수 있는 몇 없는 방법이기에 많이 사용하고 있습니다.

직접 스크롤애니메이션을 구현하는 것은 상당히 어렵습니다. window.addEventListner 등등… 계산도 어렵고 ssr 이라면, window 객체를 기다리기도 해야하고 귀찮은게 많습니다. 하지만 gsap 의 scrollTrigger을 사용하면 쉽게 구현이 가능합니다!

기본예시

gsap.registerPlugin(ScrollTrigger);
gsap.to(".box2", {
  scrollTrigger: {
    trigger: ".box2",
    toggleActions: "restart none reverse none"
  },
  x: 400, duration: 2, })