フェードインするスクロールアニメーションを実装してみた

ポートフォリオサイトを作るに当たって、いい感じのスクロールアニメーションを表現したい、と思い
ScrollMagickを使って実装してみました

今回作ったもの

実装について

スクロールアニメーションを表現したいコンポーネントを取得します
今回はアニメーションのスタイルを定義している.is-animationが付与されていない.js-scroll-fadeクラスがついているコンポーネントを対象にします

const $section = document.querySelectorAll('.js-scroll-fade:not(.is-animation)');

ScrollMagicのControllerを生成します
後ほどこれに設定を追加していく感じになります

let controller = new ScrollMagic.Controller();

Controllerに各種設定を追加します
今回は上で取得した.js-scroll-fadeクラスを持つコンポーネントに対してループ内で設定を追加します
Sceneクラス生成時の引数にオブジェクト形式で設定を私、addTo関数でControllerに設定を追加します

プロパティ	説明
triggerElement	スクロールアニメーション発火対象のコンポーネント
triggerHook	スクロールのどの位置でイベント発火するか
reverse	スクロールを戻した際に対象コンポーネントももとに戻すか
offset	発火までの遅延スクロールpxを設定
duration	対象コンポーネントのアニメーション実行時間(px)

実際に試したり詳しい設定に関してはこちら
Scene Manipulation - Examples - ScrollMagic

あとは基本的にはsceneがenterイベントを受け取ったときにアニメーションなどを追加すると、
好きなように動かせます

for(let i = 0; i < $section.length; i++) {
  let scene = new ScrollMagic.Scene({
    triggerElement: $section[i],
    triggerHook: 'onEnter',
    reverse: false,
    offset: 100
  })
  .addTo(controller);
  scene.on('enter', ()=>{
    console.log('enter');
    $section[i].classList.add('is-animation');
  });
  scene.on('end', ()=>{
    console.log('end');
    scene.destroy(true);
  });
}

参考

liginc.co.jp

qiita.com

おわりに

色々と応用がききそうなので、これをベースにいろんな表現に挑戦したいと思います次はパララックスを作ってみたいと思ったりしてます :D