스크롤 인터랙션의 핵심: ScrollTrigger 입문
스크롤 인터랙션의 핵심: ScrollTrigger 입문
"웹사이트의 스크롤을 내리는 순간, 마법이 시작됩니다."
Apple 사이트나 화려한 프로모션 페이지에서 스크롤을 내릴 때마다 요소들이 튀어나오는 효과를 본 적이 있나요?
Apple 사이트나 화려한 프로모션 페이지에서 스크롤을 내릴 때마다 요소들이 튀어나오는 효과를 본 적이 있나요?
ScrollTrigger는 GSAP의 공식 플러그인으로, 스크롤 위치를 감지하여 애니메이션을 완벽하게 제어하는 프론트엔드 생태계 최강의 도구입니다.
[그림 1] 브라우저 스크롤 이벤트와 타임라인 애니메이션을 완벽하게 동기화하는 ScrollTrigger 시스템
1. 스크롤트리거(ScrollTrigger) 뷰포트 교차 원리
브라우저 창(Viewport)의 특정 지점과 감시 대상 요소의 지점이 만날 때 애니메이션이 실행되는 시각적 원리입니다.
📜 ScrollTrigger 3대 규칙
강력한 만큼 사용 전 확실하게 알아야 할 기본 원칙이 있습니다. 플러그인을 활용하기 위해서는 가장 먼저 registerPlugin을 선언해야 합니다.
| 규칙 | 코드 예시 | 설명 |
|---|---|---|
| 1. 라이브러리 추가 | <script src="...ScrollTrigger.min.js"> | GSAP 코어 외에 플러그인 파일을 추가로 로드해야 합니다. |
| 2. 플러그인 등록 | gsap.registerPlugin(ScrollTrigger) | JS 최상단에 단 한 번 선언하여 엔진에 플러그인을 인식시킵니다. |
| 3. 트리거 할당 | scrollTrigger: ".box" | 어떤 요소가 화면에 나타날 때 애니메이션을 시작할지 기준점을 잡아줍니다. |
<!-- 1. 필수 라이브러리 로드 -->
<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>
<div class="scroll-container">
<div class="intro-section">
<h2>아래로 스크롤 해보세요 👇</h2>
<div class="mouse-icon"></div>
</div>
<div class="trigger-section">
<div class="box">마법 등장!</div>
</div>
</div>