GSAP 패럴랙스 이펙트 - 기본 애니메이션

 

• GSAP 패럴랙스 이펙트 공부하기 - 기본 애니메이션

---

Review
 
 

 첫 출근 전 이것저것 할 일이 많아서 전국 여기저기 돌아다니고 있다.

오늘 시간 여유가 조금 있어서 GSAP 공부를 해보기로 했다. 포트폴리오를 제작할 때 GSAP을 활용했었는데

벌써 기술 활용법을 잊어버리고 있어서 간단한 것들을 만들어보면서 다시 익히고자 한다.

웹스토리보이님의 강의를 들으면서 만들어 볼 건데, 이것 외에도 이 분의 강의를 들으면서 굉장히 도움을

많이 받고 있다. 너무 감사하게 생각하고 있습니당 !

여튼 만들어보면서 복습할 것이고, 또 다른 사이트를 만들 때 이 기술을 활용해야지 - 

 

파이팅 !

 

---

 

• GSAP 패럴랙스 이펙트 공부하기 - 기본 애니메이션

 

도움 받은 강좌

: https://youtu.be/_rAAY_Zp4FI

 

 

 

---

 

 

trigger

: trigger는 스크롤을 내리고 요소가 보이는 영역에 오면 움직이도록 설정한다.

애니메이션 속성은 똑같이 작업을 하고 scrollTrigger를 설정한다. trigger를 설정하면 스크롤을 내릴 때

움직이기 시작한다. 스크롤 이벤트를 작동시키고 싶다면 scrollTrigger 속성을 설정하고, 움직이는 시점을

적용하기 위해서 trigger를 설정하는 것이다.

 

 

 

toggleActions

: toggleActions는 애니메이션의 행동을 설정하는 것이다.

애니메이션이 시작했을 때, 애니메이션이 끝났을 때, 애니메이션이 시작하고 화면에 보이지 않을 때,

애니메이션이 끝나고 화면에 보이지 않을 때 4가지로 설정할 수 있다. 

onEnter, onLeave, onEnterBack, onLeaveBack를 의미하며, 여기에는 play, pause, resume, 

reset, restart, complete, reverse, none 요소 값을 설정할 수 있다.

하나씩 대입하면서 눈으로 직접 확인하는 것이 가장 정확하다.

 

 

 

 

start, end

: start, end는 애니메이션이 언제 시작하는지, 끝나는지를 설정하는 것이다.

trigger는 애니메이션의 기준점 역할을 하고, start는 시작점을 의미한다.

start와 end는 두가지 요소 값을 설정한다. 첫 번째 요소는 요소의 시작점을 의미하고, 두 번째 요소는

브라우저의 시작점을 의미한다. 요소의 시작점과 브라우저의 시작점이 만나면 애니메이션이 작동되는

원리다. 여기에는 top, bottom, left, right, center를 사용할 수 있으며, px이나 % 사용도 가능하다.

또 markers: true로 설정하면 마커의 위치를 확인할 수 있다.

 

 

 

 

scrub

: scrub은 스크롤을 내리면 같이 움직이게 설정할 수 있다.

기본 scrollTrigger를 설정하면, 시작점이 되었을 때 한 번만 움직이지만, 이 효과는 마우스 스크롤 값에

따라 움직이도록 설정된다. 이 속성에는 true 및 정수 값을 넣을 수 있다.

미세한 차이가 있으니 직접 확인해보는 것이 가장 좋다. 

 

 

 

 

pin

: pin은 말 그대로 고정시키는 역할을 한다.

패럴랙스 이펙트에서 많이 쓰이는 효과이다. 고정시키는 역할은 다른 예제에서 더 자세히 공부하기로 

하고 여기서 우선 내가 위치한 영역에 고정시키기 위해서 pin: true를 설정한다.

핀의 위치는 end의 두 번째 속성값을 변경해보면 확인할 수 있다.

 

 

 

 

toggleClass

: toggleClass는 시작점이 됐을 때 애니메이션도 줄 수 있지만 class도 추가로 설정해줄 수 있다.

class 이름은 active로 설정하고, 여기에 id 값까지 추가로 설정해서 마커의 이름을 변경할 수 있다.

 

 

 

 

callback 함수

: callback 함수는 간단하게 함수 2개가 있으면 하나를 먼저 실행하고 나서 그것이 완료되면 그 다음

함수를 호출시켜 실행해라 이런 것이다. 보통은 2개의 함수를 실행시키면 동시에 실행되지만,

2개가 동시에 실행되면 충돌이 일어나 문제가 생긴다.

toggleActions처럼 onEnter, onLeave, onEnterBack, onLeaveBack 메소드를 제공하며,

onUpdate나 onToggle 같은 메소드도 제공한다.