JavaScript - GSAP & ScrollTrigger

01.ScrollTrigger란?

• scroll 위치에 맞춰서 애니메이션을 실행시키고 싶은 경우 사용합니다.

02.설치

• 공식 사이트 혹은 CDN 혹은 npm 등 편한 방법으로 ScrollTrigger.js나 ScrollTrigger.min.js 를 다운로드 합니다.

• https://greensock.com/docs/v3/Installation

• https://cdnjs.com/libraries/gsap

cdn

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

03.스크롤트리거(ScrollTrigger) 기본

• 스크롤을 해서 해당 요소가 보일 때 애니메이션 효과가 나타나도록 하는 것이 목적이다.

• 이번에는 이미지를 준비해봤다.

gsap.registerPlugin(ScrollTrigger);
gsap.to(".box2", { // 대상 요소
  scrollTrigger: ".box2", x: 600, duration: 3 })  // 속성

• 이제 해당 요소가 화면에 보이는 지점에서 애니메이션 효과가 시작된다.

04.토글액션(toggleActions)

• toggleActions은 스크롤 트리거의 이벤트 행동을 정의한다.
• 위 방식은 페이지 로드 후 단 한 번만 실행 가능한 일회성 애니메이션 효과이다.
• 스크롤을 다시 올렸다가 내려봐도 이미 실행된 애니메이션 효과가 다시 시작되지 않는다.
• 몇 가지 방법이 있는데 먼저 토글 액션을 알아보겠다.

gsap.registerPlugin(ScrollTrigger);
gsap.to(".box2", { // 대상 요소
  scrollTrigger: {
    trigger: ".box2",
    toggleActions: "play none none restart" // toggleActions: onEnter onLeave onEnterBack onLeaveBack
  },
  x: 400, duration: 2, }) // 속성

• toggleActions은 onEnter, onLeave, onEnterBack, onLeaveBack 네 가지로 구성된다.
• 스크롤과 요소의 위치에 따라서 네 가지 액션이 실행되는 것이다.
• onEnter : scroll-start ~ scroll-end 사이
• onLeave : scroll-end부분을 넘어갈 때
• onEnterBack : scroll-start ~ scroll-end 사이로 다시 들어갈 때
• onLeaveBack : scroll-end부분을 다시 넘어갈 때
• play (시작) | restart (재시작) | reverse (반전) | pause (멈춤)
• resume (트리거 이벤트를 이어함) | reset (초기화) | complete (이벤트 종료후)

• 이제 스크롤을 움직여보면 이미지가 재시작되는 것을 볼 수 있습니다.