[GSAP] scrollTrigger

hosik kim·2024년 1월 13일

포트폴리오 사이트를 만들면서 해당 컴포넌트 뷰포트에 있을 경우
가로모드가 실행되는 기능을 구현하면서 사용했던 GSAP(GreenSock Animation Platform)에 대한 정리 내용입니다.

GSAP (GreenSock Animation Platform)

GSAP는 스크롤 기반 애니메이션을 만들 수 있는 자바스크립트 라이브러리입니다.

또, GSAP의 장점은 프레임워크에 구애를 받지 않아
React , Vue, Angular 등 어떠한 프레임워크에서도 사용이 가능하다는 장점을 가지고 있습니다.

주요 기능

특정 요소에 애니메이션을 연결하여 해당 요소가 뷰포트에 있을 때만 재생되도록 합니다.
scrollTrigger는 정의된 영역에 들어가가너ㅏ 나갈 때 애니메이션에 대한 작업(재생, 일시 중지, 다시 시작, 되감기, 완료, 재설정)을 수정하거나 스크러버(scrub: true)처럼 작동하도록 스크롤바에 직접 연결할 수 있습니다.
애니메이션과 스크롤바 사이의 연결을 부드럽게하여 "추적"하는 데 일정 시간이 걸리도록합니다. scrub: 1 은 따라 잡는 데 1초가 걸립니다.
scrollTrigger를 GSAP 애니메이션에 직접 포함하거나 독립 실행형 인스턴스를 만들고 콜백 시스템을 활용하여 원하는 작업을 수행할 수 있습니다.
수직 또는 수평 스크롤을 수용합니다.
스크롤 위치를 정의하여 "요소의 중심이 뷰포트에 중앙에 닿으면 시작하고 다른 요소의 하단이 뷰포트의 하단에 닿으면 종료"와 같이 키워드(top, center, bottom, left), 백분율, 픽셀 도는 "+= 50px"와 같은 상대 값을 사용합니다.
개발 중에 시각적 마커를 활성화하여 시작, 종료 트리커 지점의 정확한 위치를 확인할 수 있습니다.
- markers: {startColor: "green", endColor: red", fontSize: "12px"} boolean 값으로 설정하여 마커를 보였다가, 안보였다 설정도 가능합니다.
창 크기가 조정되면 자동으로 위치를 다시 계산합니다.
반응형 - matchMedia() 메서드를 사용하여 표준 미디어 쿼리를 사용하여 다양한 콰면 크기에 대해 다른 설정을 만듭니다.

GSAP 사용하기

gsap는 from, to 키워드로 시작점과 끝점을 연결 시킬 수 있습니다.
아니면 단독으로 to만 사용하여 기존 css에서 변형을 줄 수 있습니다.

설치방법

npm install gsap

간단한 예

gsap.to(".box", {
	scrollTrigger: ".box", 
  // ".box"가 뷰포트에 들어갈 때 애니메이션을 시작합니다(한 번).
  	x: 500
})

내가 작성한 코드

let scrollTween = gsap.to(sections, {
  xPercent: -120 * (sections.length - 1),
  // x축으로 -120% * (sections 영역의 길이에서 -1(마지막 화면))을 뺀 만큼의 속도로 애니메이션 됩니다.
  ease: "none",
  scrollTrigger: {
    trigger: horizontal,
    start: "top 56px",
    /*
    트리거의 시작점을 설정합니다. 
    트리거 요소의 상단이 뷰포트 상단에서 56픽셀 떨어져 있을 때 
    애니메이션이 시작됩니다.
    */
    end: () => "+=" + horizontal.offsetWidth,
    /*
    애니메이션이 종료되어야 하는 시점을 정의합니다. 
    요소의 너비로 설정되어 horizontal이 요소가 끝날 때까지 
    애니메이션이 계속됩니다.
    */
    pin: true,
    // 애니메이션 도중 핀을 이용하여 가로 모드가 끝날때까지 고정됩니다.
    scrub: 1,
    // 스크롤과 함께 애니메이션이 1:1 비율로 진행됩니다.
    markers: false,
    // 디버깅을 위한 마커를 표시하지 않습니다.
    invalidateOnRefresh: true,
    /* 페이지를 새로 고칠 때 ScrollTrigger를 무효화하여 
    위치를 다시 계산하도록 합니다.
    */
    anticipatePin: 1,
    // 고정된 상태로 애니메이션이 시작되기 전에 스크롤 위치에 따라 약간의 애니메이션 효과를 부여합니다.
  },
});