[GSAP] ScrollTrigger 사용 패턴

📌ScrollTrigger 사용 패턴

1.  gsap.to() + scrollTrigger     ✔ 단일 애니메이션 

=> 하나의 애니메이션 사용 (단순한 애니메이션 단일 적용시 사용)

=> 스크롤 시 요소가 한 번에 변화할 때

=> 트리거 요소를 지정 가능

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

 

2.  gsap.timeline ({ scrollTrigger: {...} });    ✔ 다수 애니메이션 

=> 여러 개의 애니메이션을 순차적으로 실행할 때 사용

=> 스크롤에 따라 단계적으로 변화 줄 때

 

❗ **팁** ❗

=> .to()를 계속 추가하면 여러 애니메이션을 하나의 타임라인에서 연결 가능

=> 순차적으로 실행 ( x 값 이동 후 180도 회전 )

flow_scroll.to(".box", { x: 300, duration: 2 })
           .to(".box", { rotation: 180, duration: 1 });

 

=> 한 번에 실행  ( x 값 이동하면서 동시에 180도 회전 )

flow_scroll.to(".box", { x: 300, rotation: 180, duration: 2 });

let flow_scroll = gsap.timeline({
    scrollTrigger: {
        trigger: ".box",
        start: "top center",
        end: "bottom center",
        scrub: true
    }
});

// 순차적
flow_scroll.to(".box", { x: 300, duration: 2 })
           .to(".box", { rotation: 180, duration: 1 });
           
// 동시적
flow_scroll.to("box", { x: 300, rotation: 180, duration: 2 };

 

 

3.  ScrollTrigger.create()    ✔ 애니메이션 x  스크롤, pin 효과만 o 

=> 애니메이션 없이 고정(pin)하거나 감지할 때

=> 애니메이션 없이 스크롤 이벤트만 사용할 때

ScrollTrigger.create({
    trigger: ".section",
    start: "top top",
    end: "bottom top",
    pin: true // 스크롤 중 요소를 고정
});

 

4.  gsap.to()에서 pin 적용     ✔ 단일 애니메이션 + 고정 

위

x:500

아래

gsap.to(".box", {
    x: 500, // 오른쪽으로 이동
    duration: 2,
    scrollTrigger: {
        trigger: ".box_wrap", // .box_wrap에 도달하면 애니메이션 실행
        start: "top center",
        end: "bottom center",
        scrub: true, // 스크롤 속도에 맞춰 애니메이션 실행 (true -> 부드럽게)
        pin: true // 스크롤 중 .box를 고정
    }
});

=> .box_wrap이 스크롤 될 때 오른쪽으로 이동

=> .box_wrap이 고정(pin) 되었다가 end 지점에서 해제됨

5.  gsap.timeline()에서 pin 적용     ✔ 다수 애니메이션 + 고정 

let flow_scroll = gsap.timeline({
    scrollTrigger: {
        trigger: ".section1",
        start: "top top",
        end: "bottom top",
        scrub: 1,
        pin: true, // .section1을 스크롤 중 고정
        markers: true
    }
});

flow_scroll.to(".box", { x: 300, duration: 2 }) // 오른쪽 이동
           .to(".box", { rotation: 180, duration: 1 }) // 회전
           .to(".box", { scale: 1.5, duration: 1 }); // 크기 확대

=> .section1이 스크롤 중에 고정됨 (pin)

=> .box가 오른쪽으로 이동 -> 회전 -> 크기 확대 순차적으로 애니메이션 실행

6.  ScrollTrigger.create()와 gsap.to의 조합     ✔ pin 고정 후 애니메이션 실행 

// .section을 스크롤 중 고정
ScrollTrigger.create({
    trigger: ".section",
    start: "top top",
    end: "bottom top",
    pin: true
});

// 고정된 상태에서 애니메이션 실행
gsap.to(".box", {
    x: 300,
    duration: 2,
    scrollTrigger: {
        trigger: ".box",
        start: "top center",
        end: "bottom center",
        scrub: true
    }
});

=> .section이 고정됨(pin)

=> .box가 고정된 .section 안에서 스크롤될 때 이동