h1 {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 10;
    transform: translate(0, -50%);
    font-size: 50px;
    text-align: center;
  }
  #pinContainer {
    overflow: hidden;
    width: 100%;
    height: 100vh !important;
  }
  section {
    position: absolute;
    width: 100%;
    height: 100vh;
  }
  #page01 {
    z-index: -1;
    background: orange;
  }
  #page02 {
    background: pink;
  }
  #page03 {
    background: skyblue;
  }
  #page04 {
    background: grey;
  }

const controller = new ScrollMagic.Controller(); // // 1. ScrollMagic 컨트롤러 생성
      const section = document.querySelectorAll('.section');

      let timeLineMax = new TimelineMax();
      // 2. 움직질 요소와 인터랙션 추가
      section.forEach( (el, boxIndex) => { 
        if (boxIndex > 0) {
          timeLineMax.fromTo(`#${el.id}`, 1, {y: "100%"}, {y: "0%", ease: Linear.easeNone})
        }
      })

      new ScrollMagic.Scene({
          triggerElement: "#pinContainer",
          triggerHook: "onLeave",
          duration: "400%"
        })
        .setPin("#pinContainer")  // 3. 컨텐츠 setPin으로 고정
        .setTween(timeLineMax)
        .addIndicators()
        .addTo(controller);