gsap.to()와 ScrollTrigger.create()의 차이

🚀 gsap.to()와 ScrollTrigger.create()의 차이

1️⃣ ScrollTrigger.create()

• 단순히 특정 스크롤 위치에서 이벤트(enter, leave, toggle 등)를 트리거하는 역할
• 요소를 직접 애니메이션하는 게 아니라 상태 변화를 감지

 

ScrollTrigger.create({ 
    trigger: ".box", 
    start: "top 80%", 
    onEnter: () => 
    console.log("Box가 화면에 들어옴!"), 
    onLeave: () => 
    console.log("Box가 화면에서 나감!") 
});

---

2️⃣ gsap.to() + scrollTrigger 옵션

• 스크롤을 기반으로 애니메이션을 실행

gsap.to(".box", { 
    x: 300, duration: 2, 
    scrollTrigger: { 
        trigger: ".box", 
        start: "top 80%", 
        end: "top 50%", 
        scrub: true 
    } 
});

👉 스크롤을 따라 .box가 x: 300으로 이동함.

---

🔥 결론

• ScrollTrigger.create() → 단순 트리거(이벤트 감지)
• gsap.to() + scrollTrigger 옵션 → 애니메이션 실행

어떤 걸 구현하려는지에 따라 둘 중 적절한 방식을 선택하면 됨.