scrollTrigger JS Plugin

scrollTrigger란?

css 및 javascript를 활용하여 스크롤 동작 및

기타 다양한 svg 애니메이션을 제작할 수 있게 도와주는 플러그인입니다.

 

 

 

CDN 연결방법

https://greensock.com/docs/v3/Installation(설치주소)

Docs

CDN 탭에서 scrollTrigger 및 원하는 plugins 선택 후

Browser code 우측 COPY CODE 후 원하는 곳 붙여넣기

 

 

또는 cdnjs.com 이용

https://cdnjs.com/libraries/gsap

gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

---

 

gsap.to('대상', { to })

gsap.registerPlugin(ScrollTrigger); //스크롤 플러그인 안정화

gsap.to(대상, {scrollTrigger:스크롤대상, 속성:값, duration:재생시간})

gsap.to(대상, {
	scrollTrigger:{
    	trigger:대상,
        스크롤속성:값,
        스크롤속성:값
	}, 속성:값, duration:재생시간
})

See the Pen Untitled by yuna122212 (@yuna122212) on CodePen.

 

 

Ease >> 가속도

* 아래 사이트 직접 이동 후 그래프와 비교하여 공부하는 것을 권장합니다.

https://greensock.com/docs/v3/Eases

Docs

gsap.to(대상, {속성:값, duration:재생시간, ease:'가속도'})

See the Pen Untitled by yuna122212 (@yuna122212) on CodePen.

 

 

 

 

 

gsap.fromTo('대상', { from }, { To })

See the Pen Untitled by yuna122212 (@yuna122212) on CodePen.

 

 

 

ScrollTrigger.create({ option })

start와 scroller-start 지점이 만날때 애니메이션이 시작된다.

각 위치는 대상(요소 및 윈도우)의 viewport 기준으로 정해집니다.

start : 요소위치  윈도우스크롤위치

end : 요소위치 윈도우스크롤위치

* 각 위치값은 top~bottom 또는 0~100% (px가능)

See the Pen Untitled by yuna122212 (@yuna122212) on CodePen.

 

 

 

 

---

 

ScrollTrigger.create 다양한 콜백함수 onEnter, onLeave

ScrollTrigger.create({
	trigger:대상,
	onEnter:() => 실행함수, //start 실행함수
	onLeave:() => 실행함수 //end 실행함수
})

 

onEnter, onLeave 이벤트에 따라서 각각 다른 console.log 출력

ScrollTrigger.create({
	trigger:대상,
	onEnter:() => console.log('start'),
	onLeave:() => console.log('end')
})

 

onEnter, onLeave 이벤트에 따라서 class 적용/해제

ScrollTrigger.create({
	trigger:대상,
	onEnter:() => 대상.classList.add('클래스'),
	onLeave:() => 대상.classList.remove('클래스')
})

 

 

See the Pen Untitled by yuna122212 (@yuna122212) on CodePen.

 

 

---

 

 

 

* 그 외 다양한 플러그인 및 사용법은 아래 공식 사이트를 참고하세요.

https://greensock.com/docs/

Docs

https://greensock.com/scrolltrigger/

ScrollTrigger