GSAP ScrollTrigger 사용하기

joy·2025년 3월 8일

jquery

목록 보기
3/3

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:재생시간
})

적용 사이트
http://homepro.phpweb.co.kr/

profile
FE

0개의 댓글