GSAP - scrollTrigger 사용하기(1)

scrollTrigger란

GSAP의 플러그인 중 하나로, 스크롤 이벤트를 사용하여 애니메이션 효과를 제어할 수 있도록 하는 도구

 

 

1. 사용법

GSAP 홈페이지에서 cdn, npm 등의 방식으로 사용할 수 있으며,

gsap과 scrollTrigger 모두 가져와야한다.

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

 

 

 

2. 기본 문법

2-1. tween 방식

See the Pen Untitled by seuliing (@seuliing) on CodePen.

 

 

2-2. 생성자 방식

See the Pen GSAP scrollTrigger (2) by seuliing (@seuliing) on CodePen.

 

 

2-3. marker : 애니메이션 시작점와 종료점을 시각적으로 표시

 

2-4. toggleActions : "시작, 끝, 다시 시작으로, 다시 끝으로"

• play : 애니메이션 실행
• pause : 애니메이션 일시중지
• resume : 일시중지 후 다시 실행
• reverse : 역방향 재생
• restart : 처음부터 다시 실행
• none: 아무 동작하지 않음