[JavaScript] Gsap ScrollTrigger사용하기

---

ScrollTrigger란?

scroll 위치에 맞춰서 애니메이션을 실행시키고 싶은 경우 gsap 의 scrollTrigger을 사용하면 보다 쉽게 구현이 가능하다!

---

기본 Setting

✅ gsap setting

cdn 파일로 불러오기

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>

npm 설치

npm install gsap

✅ ScrollTrigger setting

gsap 속성에서 scrollTrigger 속성을 사용할 수 있게 된다.

gsap.registerPlugin(ScrollTrigger);

---

기본 속성들

✅ trigger

gsap.to(".box", {
  scrollTrigger: {
    trigger: "",
  },
});

scrollTrigger: {trigger: "target"}

target : 스크롤의 기준이 될 개체를 class명,id로 선택가능

✅ start,end

gsap.to(".box", {
  scrollTrigger: {
    trigger: ".box",
    start: ""
  },
});

값이 하나인 경우는 선택한 요소에 높이를 기준으로 시작선과 끝맺음 선을 정한다.

top,center,bottom,px,%등의 단위 사용가능

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

값이 2개인 경우는 첫번쨰는 선택한 요소에 높이를 기준으로 시작선과 끝맺음 선을 정하고 두번째 값은 viewPort 높이를 기준으로 시작선과 끝맺음 선을 정한다.

See the Pen 2.scrollTrigger start,end by taewok (@taewok) on CodePen.

✅ markers

기본적으론 false이며 true로 설정시 시작선과 끝맺음선이 보이게 된다.

gsap.to(".box", {
      scrollTrigger: {
      trigger: ".box",
      start: "top",
      end: "bottom",
      markers: true,
    }
});

스타일링도 설정해 줄 수 있다.

markers: {
    startColor: "red",
    endColor: "yellow",
    fontSize: "3rem"
}

속성명	설명
startColor	시작선의 색깔변경
endColor	끝맺음 선의 색깔변경
fontSize	가이드 문자에 font-size 변경

✅ toggleActions

toggleActions:"none none none none"

왼쪽에서 순서대로

속성명	설명
onEnter	scroller-start선이 start선을 지나갔을 떄
onLeave	scroller-end 선이 end 선을 지날 떄
onEnterBack	end 선을 지나쳤던 scroller-end 선이 다시 돌아올 때
onLeaveBack	start 선을 지나쳤던 scroller-start 선이 다시 돌아올 때

총 4개의 action을 간편한 문자열로 정해줄 수 있다.

속성명	설명
play	애니메이션이 실행중이라면 계속 실행
pause	애니메이션이 진행중이라면 그대로 멈춘다.
resume	pause에 의해 멈춘 애니메이션을 그자리에서 재개
reverse	처음 위치로 되돌아간다. duration을 적용한 만큼 걸린다.
restart	애니메이션을 처음 위치에서 다시 시작
reset	처음 위치로
complete	바로 애니메이션의 끝나는 지점으로
none	아무것도 없다.

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

toggleActions이 아닌 세부적인 속성으로 사용도 가능하다. 함수가능

See the Pen scrollTrigger onEnter,onLeave,onEnterBack,onLeaveBack by taewok (@taewok) on CodePen.

✅ scrub

기본값은 false이며 duration이나 delay에 관계없이 target인 요소에 스크롤이 요소 이전으로 돌아가면 애니메이션 역시 되돌아가는 기능

애니메이션이 start하는 지점부터 end하는 지점까지 자연스럽게 이어진다.

See the Pen scrollTrigger scrub by taewok (@taewok) on CodePen.

수치를 숫자로 줬을떄

See the Pen 2.scrollTrigger scrub by taewok (@taewok) on CodePen.

---

마치며

혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요.
지적이나 피드백은 언제나 환영입니다.