[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