GreenSock 플러그인 ScrollTrigger 사용법

요즘처럼 html5+, css3+, jquery가 생기기전에는 웹사이트에 모션을 구현해내기 위해 한번쯤 사용해봤을 라이브러리가 바로 지금은 기억에서 흐릿해진 트윈맥스(TweenMax)이다.

css와 jquery로 만들어낼수 있는 애니메이션 기능이 다양해지면서 자연스럽게 사용을 안하게 되었는데

GreenSock 일명 GSAP 3버전으로 꾸준이 업그레이드 되어왔다는 사실!

속도도 빠르고 강력한 기능들이 많지만 대체할수 있는 방법도 있을뿐더러 사용법을 다시 익혀야 했기 때문에 등한시 해왔던게 사실이다. 하지만 모션으로 범벅이 된(?) 사이트를 제작할때는 유용하다고 생각한다. (극혐이지만...) 

 

그 중 오늘 알아볼 내용은 GSAP에서 확장으로 제공하는 강력한 플러그인 기능 ScrollTrigger의 사용밥에 대해서 알아보고자 한다.

사실 공식사이트(https://greensock.com/scrolltrigger/)에 들어가면 샘플과 가이드가 자세하게 설명되어 있긴 하지만 

기능도 많을뿐더라 내가 원하는 기능을 한국어가 아닌 영어로된 문서에서 찾아서 활용하려니 안구피로도가 쭉쭉 올라간다 ㅠㅠ  내가 원하는 기능은 해당하는 섹션에서 화면이 고정(fixed)되어지고 섹션안의 객체들이 스크롤되는 순서대로 움직이는 기능이다.

 

아래 소스로 바로 확인하자.

 

See the Pen Greensock scroll trigger by 장명호 (@jangmang) on CodePen.

 

 

처음엔 원하는 객체와 스크롤 위치와의 화면시점이 햇갈려서 애먹었는데

옵션자체에 markers: true 값을 넣으면 우측에 가이드선을 친절하게 제공해줘서 세상 편하다ㅎ

 

소스만봐서 이해가 안되는분들을 위해 간단히 살펴보면..

gsap.timeline({  
  scrollTrigger: {
    trigger: ".sec2", // 객체기준범위
    pin: true, // 고정
    start: "top top", // 시작점
    end: "bottom bottom", // 끝점
    scrub: 0.5, // 모션바운스
    markers: true, // 개발가이드선
    onLeave: function(){ // 끝나는지점 callback함수
      console.log('end');
    }
  }
})

위 코드중 옵션값 주석에 적어놨듯이 두번째 섹션을 고정값을 주고

.to 로 모션을 각각 나열했다. 특히 모션이 일어나는 구간을 start와 end값으로 기준을 삼아 범위지정해줄 수 있는데

여기서는 .sec2가 고정된 상태에서 자식안에 있는 텍스트들이 나타나고 사라지는 모션이기 때문에

처음부터 끝까지 범위를 준후에 css 10번째줄에 height값으로만 모션범위가 유동적으로 조정되도록 구현하였다.

물론 상황에 따라 옵션값에 스크립트 변수로 계산해서 넣는것도 가능하다.

 

모션 외에도 onLeave를 이용해서 섹션범위가 끝나는 콜백함수를 제공하고,

또 각각의 모션에서 onComplete를 이용해서 모션이 끝나는시점도 콜백이 가능하다.

 

그 외에도 많은 옵션과 기능들이 있기 때문에 필요에따라 눈노동이 필요할듯하다ㅎㅎ
https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

끝