[GSAP] ScrollTrigger

Setting

공식 사이트 혹은 CDN 혹은 npm 등 편한 방법 라이브러리를 가져오면 됩니다.

https://gsap.com/docs/v3/Installation/

데모
https://gsap.com/docs/v3/Plugins/ScrollTrigger/#how-to-demos

trigger

해당 요소가 화면에 보이는 지점에서 애니메이션 효과가 시작되며 단 1번만 실행합니다.

toggleActions

toggleActions는 애니메이션의 행동을 설정하는 것입니다.
onEnter(애니메이션이 시작했을 때), onLeave(애니메이션이 끝났을 때), onEnterBack(애니메이션이 시작하고 화면에 보이지 않을 때), onLeaveBack(애니메이션이 끝나고 화면에 보이지 않을 때)4가지로 설정할 수 있습니다. 여기에는 play, pause, resume, reset, restart, complete, reverse, none 요소 값을 설정할 수 있습니다. 아래는 공식 사이트 데모입니다.

start / end

애니메이션이 언제 시작하는지, 끝나는지를 설정합니다. trigger는 애니메이션의 기준점 역할을 하고, start는 시작점을 의미합니다.
start와 end는 두 가지 요소 값을 설정합니다.
첫 번째 요소는 요소의 시작점을 의미하고, 두 번째 요소는 브라우저의 시작점을 의미합니다.
요소의 시작점과 브라우저의 시작점이 만나면 애니메이션이 작동되는 원리입니다.
여기에는 top, bottom, left, right, center를 사용할 수 있으며, px이나 % 사용도 가능합니다.
여기에서 markers: true로 설정하면 마커의 위치를 확인할 수 있습니다.

Scrub(되감기)

scrub은 스크롤을 내리면 요소가 같이 움직이게 설정할 수 있습니다. 기본 scrollTrigger를 설정하면, 시작점이 되었을 때 한번만 움직이지만, scrub은 마우스 스크롤 값에 따라 움직이도록 설정됩니다. 이 속성에는 true 및 정수 값을 넣을 수 있습니다. true 대신 수치를 입력하는 것이 더 부드럽습니다.

pin(고정)

pin은 고정시키는 역할을 합니다. pin: true를 설정합니다. 핀의 위치는 end의 두 번째 속성값을 변경해보면 확인할 수 있습니다. pin은 원페이지 스크롤에 쓰입니다.

응용

gsap.utils는 여러 유용한 기능을 제공하는데 그중에 toArray()는 객체를 배열로 변환시켜 준다. 변환할 배열은 forEach문에 있는 section이고 ScrollTrigger.create() 를 모두 적용했습니다.

toggleClass

toggleClass는 시작점에 됐을 때 class를 추가할 수 있습니다. 미리 CSS를 만들어 놓고 확인해보겠습니다. class 이름은 active로 설정하였습니다. 여기에 id 값을 추가하면 마커의 이름을 변경할 수 있습니다.

callback

onEnter, onLeave, onEnterBack, onLeaveBack 메서드를 제공하며, onUpdate이나 onToggle 같은 메서드도 제공합니다.

// onEnter, onLeave 이벤트에 따라서 class 적용/해제
ScrollTrigger.create({
	trigger:대상,
	onEnter:() => 대상.classList.add('클래스'),
	onLeave:() => 대상.classList.remove('클래스'),
    onEnterBack : () => {console.log("onEnterBack")},
    onLeaveBack : () => {console.log("onLeaveBack")},
    onUpdate : (self) => {console.log("onUpdate", self.progress.toFixed(3))},
    onToggle : (self) => {console.log("onToggle", self.isActive)},
})