GSAP ScrollTrigger

GSAP ScrollTrigger Property 모음🐓
211202-211204 공부한 내용

Start

• 값을 하나만 넣을 시, viewport 기준 ScrollTrigger의 시작점. 예시) 400px = 스크롤 시작 후 400px 떨어진 시점.
• 값을 두개 넣을 시
  - 첫번째 값 : TOP | CENTER | BOTTOM - Trigger가 시작되는 기준 점
  • 두번째 값 : TOP | CENTER | BOTTOM - Viewport에서 스크롤의 위치
  • 예시) start: top center = 트리거의 윗부분이 viewport기준 중간에 닿았을 때 시작
• function으로도 작성 가능

scrollTrigger: {
	end: () => `+=${document.querySelector('.square').offsetHeight}`
}

End

• start와 같은 방식으로 사용됨. 끝나는 시점을 입력한다.

toggleClass

• start 시점에서 class가 추가되고 end에서 class가 삭제된다.

Marker

• 스크롤이 시작되고 끝나는 시점을 마킹해준다
• markers: true 입력 시, 기본 스타일로 마커가 생성된다.
• 마커 스타일 변경 시, 하단의 예시처럼 변경 가능

scrollTrigger: {
	markers: {
    	startColor: 'yellow',
        endColor: 'black',
        fontSize: '4rem',
        indent: 200
    }
}

Toggle Actions

• 스크롤 트리거의 이벤트 행동을 정의함
• toggleAction: "onEnter onLeave onEnterBack onLeaveBack"
• play | restart | reverse | pause | resume (트리거 이벤트를 이어함) | reset (초기화) | complete (이벤트종료후)
• onEnter : scroll-start ~ scroll-end 사이
• onLeave : scroll-end부분을 넘어갈 때
• onEnterBack : scroll-start ~ scroll-end 사이로 다시 들어갈 때
• onLeaveBack : scroll-end부분을 다시 넘어갈 때

ScrollTrigger.saveStyles("selector")

• 주로 responsive website를 만들 때 사용. resize를 해도 기존 스타일을 그대로 유지할 수 있도록 해줌

ScrollTrigger.matchMedia({})

• responsible 하게 만들고 싶을 때 사용

ScrollTrigger.matchMedia({
  // mobile
  "(min-width: 320px) and (max-width: 767px)": function() {
     gsap.timeline({
      scrollTrigger: {
        trigger: '.about-section1',
        start: `top ${headerHeight}`,
        toggleActions: 'restart none none none'
      }
    }).from(".about-section1 img", {
      opacity: 0,
      y: -30,
    })
  }
})

• 디바이스 해상도에 따라 GSAP을 적을 수 있다.

Scrub

• scrub은 GSAP ScrollTrigger의 이벤트가 스크롤이 사용될때만 재생되도록 만들어주는 속성이다.
• 즉, 스크롤을 멈췄을 때 이벤트도 중간에 멈춘다.
• scrub: true - 스크럽이 실행된다
• scrub에 number을 넣을 수 있다 - 이벤트가 더 부드럽게 실행되도록 도와준다 scrub: 3

Pin

• 특정 element가 고정되도록 만들어주는 속성.
• pin: true 시 트리거가 고정된다.
• pin: '.selector'시 특정 엘리먼트가 고정된다.
• pinSpacing: true시 고정되는 엘리먼트 아래에 padding을 줘서 스크롤이 끝난 후 다음 엘리먼트가 이어서 보일 수 있도록 만들어준다. pinSpacing: "margin" 이렇게 하면 padding 대신 margin을 준다.

Timeline

• 순서대로 이벤트가 진행될 수 있도록 만들어 줌.

const tl = gsap.timeline();
tl.to('.box1', {x: 500, duration: 2})
  .to('.box2', {y: 200, duration: 3})

const tl2 = gsap.timeline({
	scrollTrigger: {
    	trigger: '.main',
        start: 'top 20%',
        end: 'top 80%'
    }
})

tl2.to('.div1', {x: 500, duration: 2})
   .to('.div2', {y: 200, duration: 3})

Standalone/Custom example

• ScrollTrigger를 바로 사용할 수도 있다.
• 그때는 대문자'S'를 사용해야 한다

ScrollTrigger.create({
  trigger: ".header",
  start: "top 5%",
  toggleClass: {targets: 'nav', className: 'active'}
});

• 이렇게 하면 트리거는 [헤더]이고, 헤더의 윗부분이 viewport의 5% 지나갔을 때
  nav는 active 클래스를 갖게 된다. 이렇게 nav의 색을 변경할 수 있다.