스크롤바와 애니메이션 동기화 및 화면 고정 (Scrub & Pin)

📌 패럴랙스 스크롤의 마법, scrub과 pin

단순히 특정 지점에 도달했을 때 재생되는 것을 넘어, 마우스 휠(스크롤)을 굴리는 속도와 방향에 맞춰 비디오를 탐색하듯 애니메이션이 진행되게 하려면 scrub을 사용합니다.

또한, 애니메이션이 진행되는 동안 화면 스크롤을 특정 섹션에 묶어두고(고정) 싶을 때는 pin: true를 사용합니다. 이 두 가지를 결합하면 매우 역동적인 스토리텔링 웹 페이지를 만들 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<style>
.panel { height: 100vh; display: flex; align-items: center; justify-content: center; font-size: 2rem;}
.pin-section { background: #0f172a; color: white; height: 100vh; }
.ghost { font-size: 4rem; display: inline-block; }
</style>

<div class="panel">스크롤 시작</div>
<div class="panel pin-section">
  <div class="ghost">👻</div>
</div>
<div class="panel">스크롤 끝</div>

<script>
gsap.registerPlugin(ScrollTrigger);

gsap.to(".ghost", {
  x: 300,
  rotation: 360,
  scrollTrigger: {
    trigger: ".pin-section",
    start: "top top", // 섹션이 화면 최상단에 닿을 때
    end: "+=1000",   // 1000px 만큼 스크롤하는 동안 애니메이션 진행
    scrub: 1,        // 1초 딜레이의 부드러운 스크럽 동기화
    pin: true        // 애니메이션이 끝날 때까지 화면 고정
  }
});
</script>

실행 결과