<section style="height: 200px">
    <h1>offset: 200</h1>
  </section>

   <article>
      <section id="page01" class="section">
        <h1>Reveal 1</h1>
        <div class="box"></div>
        <div class="box"></div>
      </section>
      <section id="page02" class="section">
        <h1>Reveal 2</h1>
        <div class="box"></div>
      </section>
      <section id="page03" class="section speed" data-speed="0.2" data-ease="Linear.easeNone">
        <h1>Reveal 3</h1>
        <div class="box"></div>
        <div class="box"></div>
      </section>
      <section id="page04" class="section speed" data-speed="2" data-ease="RoughEase.ease">
        <h1>Reveal 4</h1>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </section>
    </article>
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);
        });
      });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js