h1 {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 10;
    transform: translate(0, -50%);
    font-size: 50px;
    text-align: center;
  }
  section {
    position: relative;
    z-index: 1;
    padding: 50px;
  }
  .section .box {margin-top: 50px; height: 300px; background: #fff; border: 1px solid #000; opacity: 0; transform: translateY(50px); transition: opacity 0.5s ease-in-out, transform 0.8s ease-in-out;}
  .section.speed .box {transform: translateY(100px); background: purple;}
  .section .box.visible {opacity: 1; transform: translateY(0);}
  #page01 {
    background: orange;
  }
  #page02 {
    background: pink;
  }
  #page03 {
    background: skyblue;
  }
  #page04 {
    background: grey;
  }

const controller = new ScrollMagic.Controller({globalSceneOptions: {offset: 200}}); // // 1. ScrollMagic 컨트롤러 생성
      const section = document.querySelectorAll('.section');

      section.forEach( (el, boxIndex) => {
        let tween;
        const boxes = el.querySelectorAll('.box');
        boxes.forEach( (item, itemIndex) => {
          const scene = new ScrollMagic.Scene({
          triggerElement: item,                 
          triggerHook: 0.9, // 2. 뷰포트 지점 설정
          // reverse: false // 스크롤을 위로 올렸을 경우 인터랙션을 
        })
        if (el.dataset.speed) {
          // 3. 컨텐츠 인터랙션 추가(TweenMax 이용)
          tween = TweenMax.to(item, el.dataset.speed, { opacity: 0.5, ease: el.dataset.ease }).duration(el.dataset.speed);
        }
        scene.setClassToggle(item, "visible") // 4. 컨텐츠 활성화 클래스 추가
        .setTween(tween)
        .addTo(controller);
        });
      });