ScrollTrigger의 핵심은 "언제 시작하고 언제 끝날 것인가"를 정밀하게 세팅하는 것입니다.
이 기준점은 start와 end 속성으로 픽셀(px)이나 퍼센트(%) 단위로 매우 세밀하게 조율할 수 있습니다. 눈에 보이지 않는 교차점을 머릿속으로만 계산하기는 어렵기 때문에, 개발 단계에서는 반드시 markers: true 옵션을 켜서 기준선을 시각적으로 확인하며 작업해야 합니다.
[그림 1] 스크롤트리거의 Start와 End 교차점을 시각적으로 보여주는 마커(Markers) 시스템
1. Start & End 문법 파헤치기
모든 기준점은 "요소의 기준점, 뷰포트의 기준점" 순서로 작성되는 띄어쓰기 된 두 개의 단어로 이루어집니다.
속성
작성 예시
설명
start
"top center" "top 80%"
애니메이션이 시작되는 교차점입니다. 예: 요소의 상단(top)이 화면의 중앙(center)에 올 때.
end
"bottom top" "+=300px"
애니메이션이 종료되는 교차점입니다. 예: 요소의 하단(bottom)이 화면의 최상단(top)에 닿을 때.
markers
true
start, end 위치를 디버깅할 수 있도록 화면 우측에 기준선을 표시합니다.
2. 시각적 원리: "요소"와 "뷰포트"의 만남
⚠️ 마커는 반드시 배포 전 삭제!
markers: true는 화면 우측에 start, end 등의 텍스트 기준선을 렌더링하는 아주 무거운 작업입니다. 오직 개발 및 디버깅용으로만 사용하시고, 실제 라이브 환경에 배포할 때는 반드시 삭제하거나 false로 처리해야 심각한 브라우저 렌더링 성능 저하를 피할 수 있습니다.