GSAP ScrollTrigger Snap 기능 가이드

gsap의 snap 옵션은 스크롤 애니메이션에서 특정 지점에 자동으로 정렬되도록 해주는 기능이다. 주로 ScrollTrigger와 함께 사용하며 , 특정 지점(예 섹션 단위)에서 스냅이 걸려 자연스럽게 정렬된다.

---

snap 기본 사용법

scrollTrigger: {
    snap: [0, 0.5, 1] // 스크롤 진행 정도(0%, 50%, 100%)에서 스냅
}

 

이 경우 스크롤 시 0%, 50%, 100%의 위치에서 자동으로 멈추게 된다.

---

snap 사용 방식 3가지

1. 배열 방식

snap: [0, 0.33, 0.66, 1] // 4개 섹션이 있다면 각각 0%, 33%, 66%, 100%에서 스냅

 

특정 지점으로 스냅을 걸고 싶을 때 사용

 

2. 비율 값 방식

snap: 1 / 3 // 3개의 섹션이므로 33.3% 간격으로 스냅

 

균등한 간격으로 스냅을 걸 때 유용

 

3. 함수 방식

snap: (value) => Math.round(value)

 

스크롤된 비율을 반올림하여 가장 가까운 섹션으로 스냅

---

snap의 추가 옵션

snap: {
    snapTo: "labels", // 타임라인의 특정 라벨 위치에서 스냅
    duration: 0.5,    // 스냅 애니메이션 지속시간 (초)
    delay: 0.1,       // 스냅이 작동하기 전 대기시간
    ease: "power1.inOut" // 스냅 이동 애니메이션 이징 적용
}

• snapTo:"labels", "center", "start", "end"등 설정 가능
• duration : 스냅 애니메이션 지속시간(기본값 0.5)
• delay : 스냅이 작동하기 전 지연시간
• ease: 스냅 이동 애니메이션 이징 적용

---