스크롤 애니메이션의 시작과 끝 설정 (Start, End, Markers)

📏 어디서 시작하고 어디서 끝날 것인가?

ScrollTrigger의 동작 원리는 트리거 요소의 특정 지점(예: 요소의 맨 위)과 브라우저 화면(뷰포트)의 특정 지점(예: 화면의 가운데)이 교차할 때 발동하는 것입니다.

이 교차점은 start와 end 속성으로 세밀하게 설정할 수 있으며, 개발 단계에서는 markers: 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>
.section { height: 120vh; display: flex; align-items: center; justify-content: center; }
.target { width: 100px; height: 100px; background: #10b981; }
</style>

<div class="section">내려보세요</div>
<div class="section">
  <div class="target"></div>
</div>

<script>
gsap.registerPlugin(ScrollTrigger);

gsap.to(".target", {
  scrollTrigger: {
    trigger: ".target",
    // 요소의 'top'이 뷰포트의 'center'에 도달할 때 시작
    start: "top center", 
    // 요소의 'bottom'이 뷰포트의 'top'에 도달할 때 종료
    end: "bottom top",
    markers: true // 개발용 시각적 마커 표시 (배포 시 제거!)
  },
  x: 300,
  opacity: 0.5,
  duration: 1
});
</script>

실행 결과