리소스를 많이 잡아먹는 Scroll 액션을 해결하기 위해 gsap 라이브러리를 공부하기 시작했다.
이 글은 기록용이다.
gsap.registerPlugin(ScrollTrigger)
gsap.to('.b',{
ScrollTriger: {
trigger: '.b',
start: 'top top',
end: 'bottom bottom',
markers: true,
scrub: true
//toggleActions: "restart pause reverse pause"
},
x: 400,
rotation: 360,
duration: 3
})코드만 봐도 굉장히 직관적이다. 한 줄씩 뜯어보겠다.
gsap.registerPlugin(ScrollTrigger) : 말 그대로 ScrollTrigger을 사용하기 위해 등록(선언)
gsap.to('.b', : html코드에서 .b클래스를 가진 것을 선택 (여기에 애니메이션 혹은 액션을 추가하겠다)
-
여기서
to는 기존의 위치에서 이후 선언할 형태로 바뀌겠다. -
자세한 것은 scrollTrigger이 아닌 gsap의 기본문법을 참고
ScrollTrigger: { : 스크롤을 애니메이션을 시작하는 트리거로 사용하겠다. 즉 ScrollTrigger을 사용하겠다.
trigger : 트리거가 되는 엘리먼트를 선택
이게 좀 중요한듯
start : 트리거가 시작되는 시점을 설정
-
첫 번째 인자는 위
trigger에서 정한 엘리먼트의 트리거 위치를 설정- top으로 정할 경우 엘리먼트의 맨 윗부분이 선택
-
두 번째 인자는 화면상(뷰포트)의 트리거 위치를 설정
- top으로 정할 경우 뷰포트 맨 밑(
bottom 0)에 위치
- top으로 정할 경우 뷰포트 맨 밑(
-
예시 )
start: "20px 80%-
이러면 엘리먼트의 트리거는 해당 엘리먼트의 머리에서 부터 20px 밑에 위치
-
뷰포트의 위에서부터 80%위에서 뷰포트 트리거가 위치 (밑에서부터 20%)
-
-
만약
trigger에서 다른 엘리먼트로 잡으면 거기서 시작함
두 트리거가 만날 때 애니메이션이 시작된다
end : 트리거가 끝나는 시점을 설정
-
첫 번째 인자는 위
trigger에서 정한 엘리먼트의 트리거 위치를 설정- bottom으로 정할 경우 엘리먼트의 밑 부분이 선택
-
두 번째 인자는 뷰포트의 트리거 위치를 설정
- bottom으로 정할 경우 뷰포트 맨 위(top 0)에 위치
-
예시 )
end: "bottom 100px"-
엘리먼트의 트리거는 해당 엘리먼트의 바닥에 위치
-
뷰포트의 트리거는 최상단으로부터 100px 밑에 위치
-
-
예시2 )
end: "+=300"-
이러면 뷰포트의 트리거는
start의 뷰포트위치와 합쳐짐 -
엘리먼트의 트리거는 바닥으로부터 300px 밑에 위치
-
동적으로 바꿀 수 넣을 수 있다.
end: "+= element.height"이런식으로
-
-
endTrigger속성으로 다른 엘리먼트를 잡아 끝나는 트리거 위치를 바꿀수 있음
두 트리거가 만날 때 애니메이션이 종료된다
markers : 트리거 마커의표시 (boolean)
toggleActions : 4개의 인자를 받는다.
-
순서대로
첫 입장(enter) 첫 퇴장(leave) 재입장(reEnter) 재퇴장(reLeave)-
enter: 트리거 시작시 -
leave: 트리거 끝날시 -
이하 동문
-
-
사용가능 한 속성은:
play, pause, resume, reverse, restart, complete, none
scrub : true : 애니메이션을 스크롤과 연동 시킴
-
이 코드에선 트리거가 시작 되는 동안 스크롤을 내리면 엘리먼트가 오른쪽으로 이동,
내리면 왼쪽으로 이동 -
즉 toggleActions를 대체 가능하다.
-
scrub : 1:scrub : true를 했을 때 움직이는 엘리먼트를 따라잡는데 1초(임의)가 걸린다.- 이 속성을 주면 자연스러운 액션이 가능함.
이하는 triggerAction이 아닌 gsap의 기본 문법
x : 400 : 엘리먼트의 x위치를 400px만큼 옮기겠다( +값이니 오른쪽)
rotation: 360 : 옮길 동안 360도만큼 회전
duration : 3 : 3초동안 (이동시간)
이 외의 속성들
pin: true : 트리거가 액션되는 동안 페이지를 고정시킨다.
true대신 다른 엘리먼트를 선택하면 그 엘리먼트가 고정됨
pinSpacing : 엘리먼트가 추가될때 자동으로 생기는 패딩을 없앨 수 있음
pinSpacing: boolean- 조금 더 추가하자면, 애니메이션으로 생기는 공간들 대해 절대적(absoulte)일 것이냐 상대적(relative)할 것이냐는 느낌
snap : 여러개의 section들을 넘길 때 도중에 멈추면 자동으로 설정한 값만큼 스크롤이 이동함
snap: 1 / 페이지갯수 * 너비 - 1
onEnter, onLeave, onEnterBack, onLeaveBack
-
엘리먼트에 입장, 퇴장, 재입장(세로 스크롤의경우 밑에서 위로 입장), 재퇴장(위로 퇴장)
-
콜백함수로 여러가지할수잇음
-
onEnter: () => console.log('enter)
toggleClass : 토글(트리거)되면 클래스를 추가할 수 있음
toggleClass: '토글됨': 트리거되면토글됨클래스 추가됨
id: 해당 트리거에 id를 부여할 수 있음
-
말 그대로임
ScrollTriger.create({ trigger: '.클래스이름', start: 'top top' end : 'bottom bottom', id : '아이디' toggleClass: '클래스추가', }) let trigger = ScrollTriger.getById('아이디')이런식으로 선택 가능
