어쩌다 알게 된 ƪ(•̃͡•̃͡ ƪ

[GSAP] ScrollTrigger 기본 사용법 본문

플러그인, 라이브러리/플러그인

[GSAP] ScrollTrigger 기본 사용법

비니_ 2025. 3. 26. 20:41
728x90

 

✔ GSAP - ScrollTrigger 홈페이지

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1

 

✔ 기본으로 들어가야 하는 cdn과 플러그인 활성화 코드

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.min.js"></script>

<script>
	gsap.registerPlugin(ScrollTrigger) // ScrollTrigger 플러그인 활성화 (사용하기전 코드 기입)
</script>

 

✅ 기본 예시 코드

=> 해당 영역 오면 박스가 x 축으로 500으로 감

 

위
x:500
아래

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스크롤 트리거 기본</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.min.js"></script>
</head>
<body>
    <div class="wrap">
        <div class="top">위</div>
        <div class="box">x:500</div>
        <div class="bottom">아래</div>
    </div>
    <script>
        gsap.registerPlugin(ScrollTrigger);

        gsap.to('.box', {
            scrollTrigger: '.box',
            x: 500
        });
    </script>
</body>
</html>

 

 

728x90

'플러그인, 라이브러리 > 플러그인' 카테고리의 다른 글

[GSAP] ScrollTrigger 옵션  (0) 2025.03.27
[GSAP] ScrollTrigger 사용 패턴  (0) 2025.03.26
[GSAP] Tween  (0) 2025.01.14
[GSAP] ScrollTrigger  (0) 2025.01.14
( slick slide ) 옵션 정리 / 예제 링크  (4) 2021.06.12
'플러그인, 라이브러리/플러그인' Related Articles more
Comments