CDNの読み込み
  <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>

  ２行目デバック用
  <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
  

Scroll Magic トリガー

  
  コントローラーの作成
  const controller = new ScrollMagic.Controller();

  トリガーの作成
  const scene = new ScrollMagic.Scene({
    triggerElement: "#target",                //どの位置で発火させるか
    triggerHook: 'onEnter',                  //トリガーの位置 /onEnter/onLeave デフォルトはonCenter
    offset: 200,                            //スタート位置はトリガーから200px
    duration: 1000,                        //終了距離
    reverse:false,                        //逆戻りの時は実行しない
  })

  この要素を一定期間固定
  .setPin("#target", {pushFollowers: false})
  シーンのいろいろな情報が画面に表示され、アニメーションか名前を登録可能
  .addIndicators({name: "ScrollMagicAnim1"});

  作成したシーンを宣言したコントローラに設定
  scene.addTo(controller);
  

  
  TweenMaxなどでアニメーションを登録する場合
  トリガーの作成
  const scene = new ScrollMagic.Scene({
    triggerElement: "#target",                //どの位置で発火させるか
    triggerHook: 'onEnter',                  //トリガーの位置 /onEnter/onLeave デフォルトはonCenter
    offset: 200,                            //スタート位置はトリガーから200px
    duration: 1000,                        //終了距離
    reverse:false,                        //逆戻りの時は実行しない
  })

  TweenMaxなどでアニメーションを登録する場合
  .setClassToggle("#target","active")   //クラスのtoggle
  .setTween(tween);                    //発火時のアニメーションを登録

  scene.addTo(controller);
  

使用(デバック中)

  
  HTML
  <div class="main-container" id="main">

    <div id="project01" class="project">
      <div class="img"></div>
      <h1>Scroll Magic 1</h1>
    </div>

    <div id="project02" class="project">
      <div class="img"></div>
      <h1>Scroll Magic 2</h1>
    </div>

    <div id="project03" class="project">
      <div class="img"></div>
      <h1>Scroll Magic 3</h1>
    </div>

  </div>

  CSS
  .main-container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .project {
    /* アニメーション設定 */
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    text-align: center;
    margin: 50px;
  }
  .project.fade-in {
    opacity: 1;
    transform: translateY(0);
  }
  .img {
    width: 200px;
    height: 200px;
    background-color:rgb(82,107,195);
    border-radius: 50%;
    margin: 0 auto;
  }
  .img {
    width: 200px;
    height: 200px;
    background-color:rgb(82,107,195);
    border-radius
    : 50%;
  }
  /* ScrollMagic デバッグ表示のフォント変更 - より強力なセレクタ */
  body div[style*="position"][style*="fixed"] {
  font-family: 'Courier New', monospace !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  }
  

  
  JavaScript
  デバックは常に表示設定のコード
  
  // コントローラーの作成
  const controller = new ScrollMagic.Controller();

  // 各プロジェクトにフェードインアニメーションを適用
  const projects = ['#project01', '#project02', '#project03'];
    
  projects.forEach((project, index) => {
    new ScrollMagic.Scene({
      triggerElement: project,                            //どの位置で発火させるか
      triggerHook: 0.8,                                  // 要素が画面の80%の位置に来た時に発火
      reverse: true                                     // スクロールダウン時もアニメーションを適用
    })
    .setClassToggle(project, 'fade-in')
    .addIndicators({
      name: `トリガー位置目安 ${index + 1}フェード`,   // 右側の文字表示(STARTトリガー位置目安123フェード)
      colorStart: 'green',                          // 右側に緑の文字表示(STARTトリガー位置目安123フェード)の色                       
      colorTrigger: 'red',                         // 右側に赤の文字表示(TRIGGER)の色              
      indent: 200,                                // デバッグ表示を画面右端から200px左側に配置
    })
    .addTo(controller);
  });
  

細かい設定