GSAP Scroll Trigger 속도 조절

웹 포트폴리오 페이지를 React로 리뉴얼하면서 About 페이지를 따로 만들어서, 한 문단씩 GSAP의 스크롤 트리거 사용해서 등장하도록 설정했다. 웹에서는 잘 보이는데 모바일로 천천히 스크롤을 내리면 나중에 있는 요소들이 안 보이는 문제가 있어서 속도를 조절했다.

나중에 까먹을까봐 블로그에 정리해둔다.✍

gsap.fromTo(
  paragraph,
    {
      opacity: 0,
      y: 20,
    },
    {
      opacity: 1,
      y: 0,
      scrollTrigger: {
        trigger: paragraph,
        start: 'top 100%',
        end: 'bottom 0%',
        toggleActions: 'play none none none',
        scrub: 2,
      },
    }
  );

속도를 조절하려면 여기에서 'scrollTrigger' 부분을 조절하면 되는건데,

• start : 'top 100%'는 트리거가 걸린 가장 첫번째 요소가 뷰포트 하단을 지나가면 애니메이션 시작.
• end : 'bottom 100%'는 트리거가 걸린 가장 마지막 요소가 뷰포트 하단을 지날 때 애니메이션 종료.
  퍼센트를 작게 설정할수록 마지막 요소가 더 일찍 뷰포트에 나타남.
• scrub : 애니메이션이 스크롤과 얼마나 동기화되는지 설정.
  0은 애니메이션이 스크롤에 완전히 비동기적으로 발생. 애니메이션 속도 빠름, 덜 부드러움.
  1은 애니메이션이 스크롤에 맞추어 부드럽게 진행. 더 길게 지속.
  scrub 값의 최대치는 없지만, 일반적인 범위는 0에서 2까지이며, 지나치게 큰 값을 설정하는 것은 애니메이션이 느려진다.