GSAP와 ScrollTrigger 플러그인을 사용하여 여러 패널을 고정 시키는 방법

By
markettraders
-
0
2392

여러 패널 고정시키는 방법

GSAP (GreenSock Animation Platform)과 ScrollTrigger 플러그인을 사용하여 여러 패널을 스크롤 위치에 따라 고정하는 기능을 구현할 수 있습니다.

<section id="section1" class="parallax__item"></section>
<section id="section2" class="parallax__item"></section>
<section id="section3" class="parallax__item"></section>
<section id="section4" class="parallax__item"></section>
<section id="section5" class="parallax__item"></section>
gsap.utils.toArray('.parallax__item').forEach((panel, i) => {
    ScrollTrigger.create({
      trigger: panel,
      start: 'top top',
      pin: true,
      pinSpacing: false
    })
})
  1. gsap.utils.toArray(‘.parallax__item’): .parallax__item 클래스를 가진 모든 DOM 요소를 선택하여 배열로 변환합니다. toArray 메서드는 CSS 선택자, NodeList, 배열 등을 배열로 변환합니다. 이를 통해 쉽게 반복 작업을 수행할 수 있습니다.
  2. .forEach((panel, i) => { … }): 반환된 배열에 대해 forEach 메서드를 사용하여 각 패널에 대해 반복 작업을 수행합니다. 여기서 panel은 현재 패널 요소를 나타내며, i는 인덱스를 나타냅니다.
  3. ScrollTrigger.create({ … }): 각 패널에 대해 ScrollTrigger 인스턴스를 생성합니다. 이를 통해 스크롤 위치에 따른 애니메이션 효과를 제어합니다.
    • trigger: panel: 현재 패널을 트리거로 설정합니다. 스크롤 위치가 이 트리거의 시작과 끝 위치 사이로 이동하면 애니메이션 효과가 적용됩니다.
    • start: ‘top top’: 애니메이션 시작 지점을 정의합니다. ‘top top’은 트리거 요소의 상단이 뷰포트 상단에 도달했을 때 시작하게 됩니다.
    • pin: true: 트리거 요소를 고정합니다. 스크롤 위치가 지정된 시작과 끝 위치 사이일 때, 트리거 요소가 뷰포트 내에 고정됩니다.
    • pinSpacing: false: 트리거 요소가 고정된 상태에서 다른 요소 사이의 공간을 제거합니다. 이로써 다음 트리거가 이전 트리거 바로 뒤에 나타나게 할 수 있습니다.

결과적으로, 이 코드는 .parallax__item 클래스를 가진 각 패널에 대해 스크롤 위치에 따라 고정 효과를 적용합니다. 패널이 뷰포트 상단에 도달하면 고정되고, 다음 패널이 도달하면 그 다음 패널이 고정되는 식입니다.

원하는 패널만 고정시키는 방법

원하는 패널만 고정하려면, .forEach 반복문 내에서 조건문을 사용하여 특정 패널을 선택하여 처리할 수 있습니다. 패널을 선택하는 기준은 다양할 수 있는데, 인덱스, 클래스 이름, 데이터 속성 등을 활용할 수 있습니다.

인덱스를 사용하여 특정 패널 고정하기

gsap.utils.toArray('.parallax__item').forEach((panel, i) => {
  if (i === 2) { // 인덱스 2인 패널만 고정
    ScrollTrigger.create({
      trigger: panel,
      start: 'top top',
      pin: true,
      pinSpacing: false
    });
  }
});

특정 클래스 이름을 사용하여 패널 고정하기

gsap.utils.toArray('.parallax__item').forEach((panel, i) => {
  if (panel.classList.contains('pin-me')) { // "pin-me" 클래스를 가진 패널만 고정
    ScrollTrigger.create({
      trigger: panel,
      start: 'top top',
      pin: true,
      pinSpacing: false
    });
  }
});

데이터 속성을 사용하여 패널 고정하기

gsap.utils.toArray('.parallax__item').forEach((panel, i) => {
  if (panel.dataset.pin === 'true') { // data-pin 속성이 'true'인 패널만 고정
    ScrollTrigger.create({
      trigger: panel,
      start: 'top top',
      pin: true,
      pinSpacing: false
    });
  }
});