nav {
    position: fixed;
    top: 50%;
    right: 50px;
    z-index: 10;
    transform: translate(0, -50%);
  }
  nav a {
    display: block;
    margin: 30px 10px;
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
    font-size: 0;
    text-decoration: none;
  }
  nav a.active {
    background: #fff;
  }
  h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
    font-size: 50px;
  }
  .section {
    position: relative;
    z-index: 1;
  }
  .section div {height: 300px;}
  #page01 {
    background: orange;
  }
  #page02 {
    background: pink;
  }
  #page03 {
    background: skyblue;
  }
  #page04 {
    background: grey;
  }

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

      section.forEach( (el, index) => {
        const id = el.getAttribute('id');
        const height = el.clientHeight; // 2. 컨텐츠별 높이값 설정
        new ScrollMagic.Scene({triggerElement: `#${id}`, duration: height, triggerHook: 0}) // 3. 뷰포트 지점(0, OnLeave) 설정
          .setClassToggle(`nav a:nth-child(${index+1})`, "active") // 4. 페이지 네비게이션의 활성화 클래스 추가
          .addIndicators()
          .addTo(controller);
      });
      // 5. controller의 scrollTo 이벤트에 따른 부드럽게 이동하는 TweenMax 효과 추가
      controller.scrollTo(function (newpos) {
        TweenMax.to(window, 0.5, {scrollTo: {y: newpos}}); 
      });

      const nav = document.querySelectorAll('nav a');
      
      nav.forEach( (el) => {
        // 6. 네비게이션 클릭 시 해당 href값에 따른 scrollTo 이벤트 발생
        el.addEventListener('click', (e) => {
          const id = e.target.getAttribute('href');
          if (document.querySelector(id)) {
            e.preventDefault();
            controller.scrollTo(id);
          }
        })
      })