[GSAP] ScrollTrigger 속성

GSAP의 ScrollTrigger는 스크롤에 반응하는 애니메이션을 쉽게 만들 수 있도록 도와주는 플러그인입니다. 주요 속성을 정리하면 다음과 같습니다.

1. 기본 속성

1️⃣  trigger

• 설명: 애니메이션을 트리거할 요소 지정
• 예시:

gsap.to(".box", {
  x: 500,
  scrollTrigger: {
    trigger: ".box"
  }
});

2️⃣  start & end

• 설명: 애니메이션이 시작(start)하고 끝나는(end) 스크롤 지점 설정
• 형식: "트리거 위치 트리거 대상" ("startPosition startTrigger")
• 기본값: "top bottom" (뷰포트의 아래쪽에서 트리거 요소의 위쪽이 보일 때 시작)
• 예시:

scrollTrigger: {
  start: "top 80%", // 요소의 top이 뷰포트 80% 지점에 도달하면 시작
  end: "bottom 20%" // 요소의 bottom이 뷰포트 20% 지점에 도달하면 끝남
}

3️⃣  scrub

• 설명: 스크롤 진행에 따라 애니메이션을 부드럽게 동기화
• 값:
  • true → 스크롤 속도에 맞춰 자연스럽게 애니메이션
  • 숫자(n) → n초 동안 부드럽게 이어지는 애니메이션
• 예시:

scrollTrigger: {
  scrub: true // 스크롤 속도에 맞춰 애니메이션 진행
}

2. 추가 속성

4️⃣  pin

• 설명: 요소를 고정하여 특정 구간 동안 움직이지 않도록 함
• 값: true 또는 고정할 요소
• 예시:

scrollTrigger: {
  trigger: ".box",
  start: "top top",
  end: "+=500",
  pin: true // 스크롤 시 .box가 고정됨
}

5️⃣  toggleActions

• 설명: 스크롤 이벤트 발생 시 실행할 애니메이션 동작을 설정
• 형식: "onEnter onLeave onEnterBack onLeaveBack"
• 값:
  • "play" → 애니메이션 실행
  • "pause" → 애니메이션 일시정지
  • "resume" → 이어서 실행
  • "reverse" → 반대로 실행
  • "restart" → 다시 실행
  • "reset" → 초기 상태로 되돌리기
  • "complete" → 애니메이션 완료 상태
• 예시:

scrollTrigger: {
  toggleActions: "play pause resume reverse"
}

6️⃣  markers

• 설명: 스크롤 트리거의 시작점(start), 끝점(end)을 시각적으로 표시
• 값: true (개발용으로 유용)
• 예시:

scrollTrigger: {
  markers: true
}

7️⃣  anticipatePin

• 설명: pin 사용 시 스크롤 점프 현상을 방지하여 자연스럽게 동작하도록 보정
• 값: 숫자(n) (기본값: 0, 추천값: 1~3)
• 예시:

scrollTrigger: {
  pin: true,
  anticipatePin: 1
}

3. 고급 속성

8️⃣  onUpdate

• 설명: 스크롤 진행 시 특정 동작 수행 (예: 진행률 표시)
• 예시:

scrollTrigger: {
  onUpdate: (self) => console.log(self.progress)
}

9️⃣ onEnter, onLeave, onEnterBack, onLeaveBack

• 설명: 특정 이벤트가 발생할 때 실행할 콜백 함수
• 예시:

scrollTrigger: {
  onEnter: () => console.log("들어옴"),
  onLeave: () => console.log("나감"),
  onEnterBack: () => console.log("다시 들어옴"),
  onLeaveBack: () => console.log("뒤로 나감")
}

https://webstoryboy.co.kr/1909

01. GSAP Parallax Effect : 기본 애니메이션