ScrollMagicを使ってふわっと要素を出す方法

スクロールと連動させて何かをしたいならScrollMagic一択かなと自分は思っています。
自分が忘れないための備忘録

scrollMagicの公式のデモサイトはこちら
https://scrollmagic.io/

サクッとデモだけ見たい人

サクッと実装だけみたい人は下記より見てください
CodePenのリンク
https://codepen.io/xhisashix/pen/YzZLJqY

ディレクトリの構成

.
├── css
│   └── style.css
├── index.html
└── js
    └── scrollMagic.js

CDNの読み込み

bodyの閉じたタグの上に記載
CDNのリンクに付いては上記のScrollMagicのデモサイトのページにも記載があります。

index.html

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>

サンプルHTML

htmlはこれだけ

index.html

    <div class="section">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>

CSS

style.css

.section {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 auto;
  max-width: 980px;
  width: 100%;
}
.section .box {
  margin-top: 20px;
  margin-left: 20px;
  width: 200px;
  height: 200px;
  background: #eee;
  opacity: 0;
  transition: 0.5s;
  transform: translateY(15%) rotate(-45deg);
}
.section .box:nth-child(odd) {
  transform: translateY(-15%) rotate(45deg);
}
.section .box.active {
  opacity: 1;
  transform: translateY(0);
}

js

特定のクラスがついてるものずべてにアニメーションを適応點せたかったので
今回は下記のような、実装を行いました。

scrollMagic.js

class ScrollFadeIn {
  constructor() {
    let box = document.querySelectorAll('.box:not(.active)');
    console.log(box);
    if (box.length === null) {
      return;
    }
    let controller = new ScrollMagic.Controller();
    for (let i = 0; i < box.length; i++) {
      let scene = new ScrollMagic.Scene({
        triggerElement: box[i],
        triggerHook: 'onEnter',
        reverse: false,
        offset: 150,
      })
        .addIndicators()
        .addTo(controller);
      scene.on('enter', () => {
        box[i].classList.add('active');
      });
    }
  }
}

new ScrollFadeIn();

ちょっと説明

querySelectorAll

条件に該当する要素をすべて取得する

let box document.querySelectorAll('.box:not(.active)');
console.log(box);
// ログの結果
NodeList(３) [div.box, div.box, div.box]

上記を使ってあとはループを回すだけ

    for (let i = 0; i < box.length; i++) {
      let scene = new ScrollMagic.Scene({
        triggerElement: box[i],
        triggerHook: 'onEnter',
        reverse: false,
        offset: 150,
      })
        .addIndicators()
        .addTo(controller);
      scene.on('enter', () => {
        box[i].classList.add('active');
      });
    }

イベント発火のタイミング

triggerHook: 'onEnter',

onEnter
onCenter
onLeave

クラスの追加

triggerElementが特定の位置に来たときクラスを付与
このクラスをつけアニメーションはCSSで調整を行っている

scene.on('enter', () => {
        box[i].classList.add('active');
      });

最後に

vue-scrollmagicは使ったことがあり、なんとなく理解していたが、
scrollMagicを使うのが初めてだったため、忘れないための備忘録として書かせてもらいました。

誰かの参考になれば幸いです
最後まで読んでいただきありがとうございました。