스킬 자체의 표현으로
ScrollTrigger는 스크롤에 연동된 애니메이션을 위한 GSAP의 플러그인입니다. 스크롤 위치에서 tween과 타임라인을 발동시키고, 섹션을 고정(pin)하며, 진행률을 스크롤에 스크러빙하고, start/end 범위를 통해 타임라인을 구동합니다.
이 스킬은 config 어휘 전체를 정리합니다 — trigger, start/end(clamp()와 상대값 포함), endTrigger, scrub, toggleActions, pin과 pinSpacing, snap, scroller, id, refreshPriority — 그리고 함께 도착하는 스태거 리빌을 위한 ScrollTrigger.batch(), 서드파티 스무스 스크롤러를 위한 scrollerProxy(), 가짜 가로 스크롤을 위한 containerAnimation을 추가합니다. 각 옵션별 기본값이 명시되어 있으며, 모범 사례 체크리스트와 React 정리, refresh 순서, ease, 남은 마커를 다루는 명시적 금지 목록도 함께 제공됩니다.
산출물
- 진행률이 트리거의 start-to-end 범위를 통해 스크롤 위치에 연결된 tween 또는 타임라인.
- 연결된 tween 없이 생성된 독립형 ScrollTrigger로, self.progress로 UI를 업데이트하는 등의 커스텀 동작을 위해 콜백과 함께 사용됩니다.
- ScrollTrigger.batch()가 반환하는, 배치 대상마다 하나씩 있는 ScrollTrigger 인스턴스의 배열.
- containerAnimation 트윈이 만드는 수평 이동에 따라 실행되는 중첩 트윈입니다.
작동 방식
- 01플러그인을 한 번만 등록하기
ScrollTrigger는 핵심 애니메이션 API의 일부가 아니라 플러그인 형태로 제공되므로, 스크립트가 로드된 후 scrollTrigger 설정이 실행되기 전에 단 한 번만 등록합니다.
- 02scrollTrigger 설정 연결하기
트윈이나 타임라인에는 트리거 요소와, 트리거 위치와 뷰포트 위치를 대응시켜 설명하는 start 및 end 값을 지정하는 scrollTrigger 객체가 부여됩니다.
- 03스크롤이 재생 위치를 제어하는 방식 선택하기
scrub은 재생 진행을 스크롤 위치에 지속적으로 연동시키며, 선택적으로 숫자 값을 지정해 따라잡는 지연을 줄 수 있습니다. 반면 toggleActions는 네 지점의 교차 시점마다 개별적인 play/reverse 동작을 실행합니다.
- 04섹션 고정 및 타임라인 스크럽하기
고정(pin)은 범위가 활성화된 동안 트리거 요소를 고정된 상태로 유지하며, 해당 ScrollTrigger에 연결된 타임라인은 동일한 start-to-end 구간에서 자식 요소를 진행시킵니다.
- 05동시에 등장하는 요소 일괄 처리하기
ScrollTrigger.batch()는 대상마다 하나의 ScrollTrigger를 생성하고, 짧은 간격 동안 콜백을 모아 거의 동시에 등장하는 요소들을 한 번의 호출로 스태거 효과와 함께 애니메이션할 수 있게 합니다.
- 06콘텐츠가 사라질 때 인스턴스 제거하기
단일 페이지 애플리케이션처럼 애니메이션 요소를 제거하거나 페이지를 전환하는 경우, 오래된 요소를 대상으로 계속 실행되지 않도록 관련 인스턴스를 제거해야 합니다.