GSAP 활용하여 ScrollEvent 쉽게 구현하기 - 2

 

 

지난 글에서 언급했듯이, 어떻게 하면 이전 요소가 뷰포트 상단을 기준으로 고정되고 스크롤 하면 그 다음 요소가 이전 요소 위에 카드처럼 덮이면서 쌓여나가도록 만들 수 있을까?

 

GSAP의 Pin 개념을 익힌다면 가능하다.

• pinning의 기준점은 trigger 요소의 start 와 일치하고, scroller-start에 고정된다.
• trigger 요소의 end 점이 scroller-end에 도달하면 pin이 풀리게 된다.

 

아래 영상에 나오는 tomato 색 div에 주목해보자.

 

 

1. pin 적용 전

gsap.to(".c", {
    scrollTrigger: {
      trigger: ".c",
      start: "top center",
      end: "top 100px",
      scrub: 1,
      markers: true,
    },
    x: 1200,

    ease: "none",
    duration: 3,
  });

 

 

2. pin 적용 후

gsap.to(".c", {
    scrollTrigger: {
      trigger: ".c",
      start: "top center",
      end: "top 100px",
      scrub: 1,
      pin: true <- 바뀐 부분
      markers: true,
    },
    x: 1200,
    ease: "none",
    duration: 3,
  });

 

 

 

위처럼 스크롤했을 때 c블럭이 scroller-start 지점에 들어가는 순간부터 애니메이션이 진행되는데, Y좌표는 시작점에서 벗어나지 않다가 scroller-end 지점을 만나고서야 일반적인 스크롤이 되는 것을 확인할 수 있었다.

 

 

 

 

---

 

 

 

 

이제 조금 더 응용해서 만들고자 했던 것에 가까워져 보자.

기존의 div 구성은 같되 너비와 높이가 화면에 가득차게 만들었다.

그리고 .box 라는 공통 클래스를 기준으로 배열을 생성하고, 요소마다 각각 ScrollTrigger을 달아준다.

gsap.utils.toArray(".box").forEach((box, i) => {
    ScrollTrigger.create({
        trigger: box,
        start: "top top",
        markers: true,
    })
})

 

 

이렇게 하면 일반적인 스크롤과 다를 바 없다.

이제 pin을 추가해보자.

gsap.utils.toArray(".box").forEach((box, i) => {
    ScrollTrigger.create({
        trigger: box,
        start: "top top",
        pin: true,
        markers: true,
    })
})

 

 

이전 블럭의 end 포인트가 scroller-end 지점을 나가기 전까지는 화면에 고정되어 있는 것처럼 보인다.

그러나 그 end 포인트가 나가면 해당 블럭도 다시 스크롤되어 올라간다.

이것까지 막으면 정말 레이어가 쌓이는 것처럼 만들 수 있을 것으로 보인다.

이 점은 pinSpacing 속성을 활용해준다.

gsap.utils.toArray(".box").forEach((box, i) => {
    ScrollTrigger.create({
        trigger: box,
        start: "top top",
        pin: true,
        pinSpacing: false,
        markers: true,
    })
})

 

원했던 대로 각 블럭이 카드가 쌓이듯 동작하는 것을 확인할 수 있다.

pinSpacing의 경우, boolean 값을 받는다.

• true : Default. 고정된 요소가 차지하고 있던 공간을 그대로 유지한다.
• false : 고정된 요소의 자리를 제거하고, 다른 요소가 그 자리를 차지한다.

 

 

---

 

 

 

 

마지막으로 스크롤했을 때 요소의 최상단 및 최하단에 자동으로 snap 되도록 해보자.