ScrollTrigger 입문

스크롤 인터랙션의 핵심: ScrollTrigger 입문

"웹사이트의 스크롤을 내리는 순간, 마법이 시작됩니다."
Apple 제품 소개 페이지나 화려한 프로모션 페이지에서 스크롤을 내릴 때마다 요소들이 튀어나오고 글자가 써지는 효과를 본 적이 있나요? ScrollTrigger는 GSAP의 공식 플러그인으로, 브라우저의 스크롤 위치를 감지하여 애니메이션을 완벽하게 제어하는 프론트엔드 생태계 최강의 도구입니다.

[그림 1] 브라우저 스크롤 이벤트와 타임라인 애니메이션을 완벽하게 동기화하는 ScrollTrigger 시스템

1. 스크롤트리거(ScrollTrigger) 뷰포트 교차 원리

브라우저 창(Viewport)의 특정 지점과 감시 대상 요소의 지점이 만날 때 애니메이션이 실행되는 시각적 교차 원리입니다.

📜 ScrollTrigger 필수 3대 규칙

강력한 플러그인인 만큼, 사용하기 전에 확실하게 알아야 할 기본 원칙 세 가지가 있습니다.

규칙	코드 예시	설명
`1. 라이브러리 추가`	<script src="...ScrollTrigger.min.js">	GSAP 코어 외에 스크롤트리거 플러그인 js 파일을 별도로 로드해야 합니다.
`2. 플러그인 등록`	gsap.registerPlugin(ScrollTrigger);	자바스크립트 최상단에 단 한 번 선언하여 GSAP 엔진에 플러그인을 인식시킵니다.
`3. 트리거 할당`	scrollTrigger: ".box"	어떤 요소가 화면에 나타날 때 애니메이션을 시작할지 기준점(Trigger Element)을 반드시 잡아주어야 합니다.

⚠️ 주의: Iframe 실습 환경에서의 Scroller 설정

일반적인 웹사이트에서는 브라우저 창 전체의 스크롤을 감지합니다. 하지만 여기서는 Iframe 내부에 실습 화면이 있으므로, scroller: ".scroll-container"와 같이 강제로 스크롤 영역을 직접 지정해주어야 스크롤트리거가 제대로 감지됩니다.

규칙

코드 예시

설명

1. 라이브러리 추가

<script src="...ScrollTrigger.min.js">

GSAP 코어 외에 스크롤트리거 플러그인 js 파일을 별도로 로드해야 합니다.

2. 플러그인 등록

gsap.registerPlugin(ScrollTrigger);

자바스크립트 최상단에 단 한 번 선언하여 GSAP 엔진에 플러그인을 인식시킵니다.

3. 트리거 할당

scrollTrigger: ".box"

어떤 요소가 화면에 나타날 때 애니메이션을 시작할지 기준점(Trigger Element)을 반드시 잡아주어야 합니다.