timeline관련

타임라인을 사용하는데 첫번째 코드는 안돼고 두번째 코드는 될까?

1. scrollTrigger를 timeline 내부에 설정했다.

    let economyTl = gsap.timeline({
        scrollTrigger:{
        trigger:".sc-economy",
        start:'0 0',
        end:'+=1500',
        pin:true,
        scrub:true,
        invalidateOnRefresh: true,
        // markers: true,
        },
        onEnter:function(){
            $('.sc-economy .card-item').addClass('blur')
            $('.sc-economy .arrow-area').addClass('on')
          },
          onEnterBack:function(){
            $('.sc-economy .arrow-area').addClass('on')
          },
          onLeave:function(){
            $('.sc-economy .arrow-area').removeClass('on')
          },
          onLeaveBack:function(){
            $('.sc-economy .arrow-area').removeClass('on')
          }
      
    })
    economyTl
    .to('.sc-economy .split-area',{
        x:()=>{
        return -economyWidth / 3;
        },
        ease: "none"
    })

onEnter, onLeave 같은 이벤트는 ScrollTrigger 객체에서 직접 설정해야만 동작한다.

하지만 이렇게 타임라인 내부에서 scrollTrigger를 선언하면 타임라인과 애니메이션만 연결되고, ScrollTrigger 인스턴스 자체를 분리해서 제어할 수 없음.

결과적으로 이벤트가 제대로 바인딩되지 않거나 무시될 수 있음.

특히 scrub: true를 사용하는 경우 타임라인의 진행 방식이 바뀌는데, 여기에 onEnter 같은 이벤트 트리거 방식과 충돌이 생기기 쉬움.

2. ScrollTrigger.create()로 따로 생성

const economyTl = gsap.timeline()
    economyTl
    .to('.sc-economy .split-area',{
        x: function() {
            return -economyWidth / 3;
          },
          ease: "none",
          duration:4
    },'z')
    .to(".sc-economy .arrow-area .fade",{opacity:1,delay:1,duration:1},'z')

    ScrollTrigger.create({
      animation:economyTl,
      // markers:true,
      trigger:'.sc-economy',
      start:'0 0',
      end:'+=1500',
      pin:true,
    //   scrub:1,
      invalidateOnRefresh:true,
      onEnter:function(){
        $('.sc-economy .card-item').addClass('blur')
        $('.sc-economy .arrow-area').addClass('on')
        },
        onEnterBack:function(){
        $('.sc-economy .arrow-area').addClass('on')
        },
        onLeave:function(){
        $('.sc-economy .arrow-area').removeClass('on')
        },
        onLeaveBack:function(){
        $('.sc-economy .arrow-area').removeClass('on')
        }
    })

타임라인과 ScrollTrigger를 명확히 분리하고,

ScrollTrigger.create() 안에서 이벤트, 애니메이션, 스크롤 구간을 정밀하게 제어.

특히 이 구조는 scrub, pin, invalidateOnRefresh 같은 기능과 충돌 없이 안정적으로 작동함.

1번 코드는 구조는 맞지만 동작 보장이 약한 축약형,
2번 코드는 명시적이고 안전한 방식입니다.

✅ 정리: 언제 어떤 방식 쓰면 되나?
단순한 스크롤 애니메이션
-> gsap.timeline({ scrollTrigger: {...} })도 OK

이벤트 (onEnter, onLeave)를 쓰고 싶을 때
-> 무조건 ScrollTrigger.create()로 분리

scrub, pin, 애니메이션 동기화 필요
-> ScrollTrigger.create({ animation: ... }) 구조 권장

코드 형태	의미	언제 사용?
x: -economyWidth	처음에 계산된 값만 사용	값이 변하지 않을 때
x: function() { return -economyWidth; }	매번 새로 계산하도록 설정	창 크기 변경 등 반응형 처리 필요할 때

x: function() {
return -economyWidth;
}

x: () => -economyWidth; (함수사용시)