GSAP ScrollTrigger 리뷰 & 적용 방법 🚀

웹사이트에서 스크롤 애니메이션을 자연스럽게 구현하고 싶다면, GSAP ScrollTrigger가 최고의 선택입니다.
GSAP(GreenSock Animation Platform)는 강력한 애니메이션 라이브러리이며, ScrollTrigger는 이를 스크롤 이벤트와 결합하여 다양한 인터랙션을 구현할 수 있도록 돕습니다.

🟢 GSAP ScrollTrigger란?

GSAP ScrollTrigger는 스크롤 위치에 따라 애니메이션을 트리거하거나 조정하는 플러그인입니다.
이를 활용하면,

✅ 특정 섹션에 도달했을 때 애니메이션 실행
✅ 스크롤에 따라 요소의 위치, 크기, 투명도 등을 변경
✅ Parallax(패럴럭스) 효과 구현
✅ 고정 애니메이션 (Pinning) 구현

등을 쉽게 할 수 있습니다.

🛠️ 기본 적용 방법

📌 1. GSAP & ScrollTrigger 설치

GSAP와 ScrollTrigger를 CDN 또는 npm을 통해 불러올 수 있습니다.

CDN 방식

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

npm 방식

npm install gsap

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

📌 2. 기본 스크롤 트리거 예제

<div class="box"></div>

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 200px auto;
    opacity: 0;
  }
</style>

<script>
  gsap.registerPlugin(ScrollTrigger);

  gsap.to(".box", {
    opacity: 1,
    x: 300,  // 오른쪽으로 이동
    duration: 2,
    scrollTrigger: {
      trigger: ".box", // 이 요소가 보이면 실행
      start: "top 80%", // 화면의 80% 지점에서 시작
      end: "top 30%",   // 30% 지점에서 종료
      scrub: true,      // 스크롤에 따라 부드럽게 진행
    }
  });
</script>

📌 3. Parallax 효과 적용

배경이 스크롤에 따라 다르게 움직이는 패럴럭스 효과도 쉽게 구현할 수 있습니다.

<div class="parallax"></div>

<style>
  .parallax {
    width: 100%;
    height: 500px;
    background-image: url('https://dummyimage.com/1200x800/aaa/fff&text=Parallax');
    background-size: cover;
    background-position: center;
  }
</style>

<script>
  gsap.to(".parallax", {
    backgroundPositionY: "-50px",
    scrollTrigger: {
      trigger: ".parallax",
      start: "top bottom",
      end: "top top",
      scrub: true, // 부드러운 애니메이션 적용
    }
  });
</script>

📌 4. 고정 애니메이션 (Pinning) 구현

특정 섹션이 스크롤할 때 고정되도록 만들 수도 있습니다.

<section class="pin-section">고정되는 콘텐츠</section>

<style>
  .pin-section {
    height: 100vh;
    background-color: lightblue;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }
</style>

<script>
  gsap.registerPlugin(ScrollTrigger);

  ScrollTrigger.create({
    trigger: ".pin-section",
    start: "top top",
    end: "+=500",
    pin: true, // 스크롤할 때 고정
  });
</script>

📌 5. ScrollTrigger와 Timeline 함께 사용하기

여러 개의 애니메이션을 순차적으로 실행하고 싶다면 Timeline과 함께 사용할 수 있습니다.

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".box",
    start: "top 80%",
    end: "top 30%",
    scrub: true
  }
});

tl.to(".box", { x: 300, opacity: 1, duration: 2 })
  .to(".box", { rotation: 360, scale: 1.5, duration: 2 })
  .to(".box", { backgroundColor: "blue", duration: 2 });

✅ 장점
✔️ 부드러운 애니메이션 – CSS 애니메이션보다 부드럽고 강력한 제어 가능
✔️ 손쉬운 적용 – 간단한 코드로 다양한 효과 구현 가능
✔️ Parallax, Pinning 등 다양한 효과 지원
✔️ 스크롤 반응형 인터랙션을 쉽게 만들 수 있음

❌ 단점
⚠️ 기본적인 사용법은 쉽지만, 복잡한 애니메이션을 구현하려면 GSAP의 기본 개념을 알아야 함
⚠️ 라이브러리 추가로 인해 약간의 성능 부담이 있을 수 있음

bosumiii 님의 블로그