[GSAP] ScrollTrigger 옵션

✔ ScrollTrigger 옵션 (timeline 과 to 둘다 사용 가능한 옵션이 대부분이지만 *표시는 timeline만 가능)

* 표시는 gsap.to()에서는 사용할 수 없음 (단일 애니메이션이기 때문에)

=> 밑에 표에 다시 정리

 

gsap.timeline({

  scrollTrigger: { 옵션 }

});

 

gsap.to(".element", {

  x: 100,

  scrollTrigger: { 옵션 }

});

옵션	값	설명
주로 쓰이는 옵션들
trigger	대상	트리거가 될 요소
start	top, center, bottom, %, +=20px, 함수	애니메이션 시작 위치
end		애니메이션 종료 위치
scrub	1❓	스크롤 속도에 맞춰 애니메이션 진행 ex) 1일 경우 1초 딜레이
pin	true, 대상	애니메이션 진행 동안 해당 요소를 고정
anticipatePin	숫자 기본적으로 1을 사용하지만 클수록 더 자연스러움	pin 고정 시 튕기는 현상 방지
markers	boolean	시작과 끝 마커 표시 (디버깅 용도)
* invalidateOnRefresh	boolean	resize시 end값을 다시 계산
* toggleActions	play, pause, resume, reset ❓	스크롤 동작에 따른 애니메이션 제어
onEnter	함수	(start 시점) 트리거에 들어왔을 때 실행할 콜백
onLeave		(end 시점) 트리거를 떠났을 때 실행할 콜백
* onUpdate		스크롤 진행 중에 실행할 콜백
* onEnterBack		(end 시점) 요소가 다시 트리거에 진입했을 때 실행할 콜백
* onLeaveBack		(start 시점) 요소가 다시 트리거에서 떠났을 때 실행할 콜백
가끔 쓰이는 옵션들
id	string	고유 ID 추가
once	boolean	스크롤을 한 번만 반응하게 함 👉 스크롤 위치가 변경되어도 애니메이션이 다시 실행되지 않음
scroller	대상	스크롤이 발생하는 특정 요소 설정 👉 기본적으로는 window가 스크롤을 트리거 하지만, 다른 요소의 스크롤을 트리거하고 싶을 경우 사용
endTrigger	대상	스크롤 종료 시점 설정
horizontal	boolean	가로 스크롤 사용
snap	옵션	스크롤할 때 정해진 위치로 스냅되는 기능 👉 스크롤 위치를 특정 지점으로 고정 가능 ex) snap: {         snapTo: "labels", // 레이블을 기준으로 스냅         duration: 0.3, // 스냅이 완료되는 시간         delay: 0.1, // 스냅 지연         ease: "power1.inOut" // 스냅 애니메이션의 easing }
scrollerProxy	함수	스크롤이 window가 아니라 특정 컨테이너에서 발생하는 경우 에서 스크롤이 특정 요소에 맞게 동작하도록 가능 👉 scroller 옵션과 같이 사용해도 되고 따로 사용해도 됨 ScrollTrigger.scrollerProxy(".scroll-container", {     scrollTop(value) {         if (arguments.length) {             // 스크롤 위치를 설정             document.querySelector(".scroll-container").scrollTop = value;         } else {             // 현재 스크롤 위치를 반환             return document.querySelector(".scroll-container").scrollTop;         }     } });
onRefresh	함수	새로 고침될 때 실행되는 콜백 ** invalidateOnRefresh - 새로고침시 트리거의 범위나 위치를 재계산
autoRefreshEvents	resize, orientationchange	자동 새로고침을 위한 이벤트 설정
pinReparent	boolean	pin 사용 시 요소가 부모 요소를 벗어나는 경우 pin된 요소를 다른 부모로 옮겨서 고정 가능
refreshPriority	number (1이 최우선순위)	ScrollTrigger가 여러 개 있을 때, 트리거별 새로고침 우선순위 설정
limitCallbacks	boolean	스크롤이 지나갈 때 적용한 콜백이 과도하게 호출되는 것 방지 👉 ex) onEnter에 콜백 함수를 지정했을 경우 지나갈 때마다 여러번 호출되는데, 이것을 과도하게 실행되지 않게 방지

 

 

✔ timeline에서만 사용 가능한 옵션 (다수 애니메이션)

옵션	값	설명
invalidateOnRefresh	boolean	resize시 end값을 다시 계산
toggleActions	play, pause, resume, reset	스크롤 동작에 따른 애니메이션 제어
onUpdate	함수	스크롤 진행 중에 실행할 콜백
onEnterBack		(end 시점) 요소가 다시 트리거에 진입했을 때 실행할 콜백
onLeaveBack		(start 시점) 요소가 다시 트리거에서 떠났을 때 실행할 콜백