포트폴리오를 준비하면서 거의 빠지지 않고 쓰는 Gsap scrollTrigger에 대한 메모용(?) 간단한 사용법을 소개해보려 한다.

---

ScrollTrigger란?

---

ScrollTrigger는 최소한의 코드로 놀라운 스크롤 기반 애니메이션을 만듭니다. 또한 애니메이션과 무관하더라도 스크롤과 관련된 모든 것을 트리거합니다.

1. setting

공식 사이트 혹은 CDN 혹은 npm 등 편한 방법 라이브러리를 가져오면 됩니다.

//cdn
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>

//스크롤 트리거 불러오기(플러그인 안정화)
<script>
gsap.registerPlugin(ScrollTrigger);

</script>  

2. 기본 사용법

gsap.to(대상, {
	scrollTrigger:{
    	trigger:대상,
        스크롤속성:값,
        스크롤속성:값
	}, 속성:값, duration:재생시간
})

• start: "0% 30%": 왼쪽은 대상 트리거, 오른쪽은 시야
• scrub: 1: 숫자가 높아질수록 애니메이션이 부드러워짐, true도 가능
• 속성 끝에는 , 꼭 있어야 함

이외에도 pin, stagger, toggleactions 등 애니메이션을 더 디테일하게 만들어 줄수 있는 속성들이 있다. 다음에는 이런 속성들이 이용한 공부를 해볼 것이다!