ScrollTrigger 설명

ScrollTrigger 예시

ScrollTrigger_ScrollTrigger.create({
  trigger: sloganMotion,
  start: 'top 30%',
  end: 'bottom 30%',
  onToggle: function onToggle(self) {
    var index = sloganMotion.dataset.index;
    var keyword = keywordList.querySelector(".__keyword[data-index=\"".concat(index, "\"]"));
    keyword.classList.toggle('__active', self.isActive);
  },
  onEnter: function onEnter() {
    keywordList.classList.add('__active');
  },
  onEnterBack: function onEnterBack() {
    keywordList.classList.add('__active');
  },
  onLeave: function onLeave() {
    keywordList.classList.remove('__active');
  },
  onLeaveBack: function onLeaveBack() {
    keywordList.classList.remove('__active');
  }
});

 

📌 ScrollTrigger란?

• GSAP(GreenSock Animation Platform)의 스크롤 기반 트리거 기능을 제공하는 플러그인.
• 특정 요소가 뷰포트(viewport) 안에 들어오거나 나갈 때 실행할 동작(애니메이션 등)을 설정할 수 있음.

---

📌 코드 분석

1. ScrollTrigger.create({...})

• ScrollTrigger.create()를 사용해 새로운 스크롤 트리거를 생성하고 설정함.

2. 주요 속성

trigger: sloganMotion

• 트리거 요소(스크롤 이벤트를 감지할 대상)로 sloganMotion을 지정.
• 즉, sloganMotion이 화면 안으로 들어오거나 나갈 때 이벤트가 발생함.

start: 'top 30%', 
end: 'bottom 30%',

• start: sloganMotion의 상단(top) 이 화면의 30% 지점에 도달하면 트리거됨.
• end: sloganMotion의 하단(bottom) 이 화면의 30% 지점에 도달하면 종료됨.

---

3. onToggle 이벤트 핸들러

 

onToggle: function onToggle(self) { 
    var index = sloganMotion.dataset.index; 
    var keyword = keywordList.querySelector(".__keyword[data-index=\"".concat(index, "\"]")); 
    keyword.classList.toggle('__active', self.isActive); 
},

• onToggle은 트리거 요소가 화면 안에 들어오거나 나갈 때 실행됨.
• self.isActive는 현재 요소가 활성화(화면 안에 있음)인지 여부를 나타냄.
• dataset.index를 이용해 sloganMotion의 data-index 값을 가져와, 같은 인덱스를 가진 .__keyword 요소를 찾음.
• 그 .__keyword 요소에 __active 클래스를 추가/제거(toggle) 함.

✅ 즉, sloganMotion이 화면 안에 들어오면 해당하는 .__keyword에 __active 클래스를 추가하고, 나가면 제거함.

---

4. 스크롤 방향에 따른 클래스 추가/제거

onEnter: function onEnter() { 
    keywordList.classList.add('__active'); 
}, 
onEnterBack: function onEnterBack() { 
    keywordList.classList.add('__active'); 
}, 
onLeave: function onLeave() { 
    keywordList.classList.remove('__active'); 
}, 
onLeaveBack: function onLeaveBack() { 
    keywordList.classList.remove('__active'); 
}

• onEnter: sloganMotion이 위에서 아래로 스크롤될 때 처음으로 start 지점에 도달하면 실행.
• onEnterBack: sloganMotion이 아래에서 위로 스크롤될 때 start 지점에 다시 들어오면 실행.
• onLeave: sloganMotion이 위에서 아래로 스크롤되면서 end 지점을 넘어서면 실행.
• onLeaveBack: sloganMotion이 아래에서 위로 스크롤되면서 start 지점보다 위로 가면 실행.

✅ 즉, sloganMotion이 화면 안에 들어오면 keywordList에 __active 클래스를 추가하고, 화면에서 나가면 제거함.

---

📌 최종 정리

• 특정 요소(sloganMotion)가 스크롤로 화면 안에 들어오면 해당하는 .__keyword와 keywordList에 __active 클래스를 추가.
• 화면 밖으로 나가면 __active 클래스를 제거.
• start: 'top 30%'과 end: 'bottom 30%'을 기준으로 트리거됨.
• 스크롤 방향에 따라 클래스 추가/제거 로직이 다름.

즉, 스크롤을 내리거나 올릴 때 특정 키워드와 리스트가 활성화되도록 조작하는 코드임.