ScrollTrigger란?
동적인 사이트를 만들 때 빠지지 않고 사용하는 라이브러리 중 하나이다.
최소한의 코드로 스크롤 애니메이션을 구현할 수 있다.
1. setting
//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:재생시간
})3. 샘플
'Front > Library' 카테고리의 다른 글
| 스크롤 트리거 (Parallax Scrolling) 구현하기 (0) | 2024.01.06 |
|---|---|
| splidejs 슬라이드 핵심 정리 (0) | 2023.09.11 |
| stickyjs (오브젝트를 고정) (0) | 2020.11.24 |
| slick (0) | 2020.11.20 |
| 10+ Best Javascript Scrolling Animation Plugins (0) | 2020.11.19 |