プログラミング

「TweenMax」と「ScrollMagic」を使ってスクロールアニメーションを実装

JavaScriptのライブラリである「TweenMax」と「ScrollMagic」を使って、スクロールした時にふわっとフェードインするアニメーションを実装してみます。

まずはScrollMagic本体のファイルを用意します。

ScrollMagic

ファイル一式をダウンロードして必要なファイルを使うか、CDNで読み込む方法があります。

ダウンロードする場合は、ZIPフォルダ内にある以下のファイルを使います。

  • scrollmagic/minified/ScrollMagic.min.js
  • scrollmagic/minified/plugins/debug.addIndicators.min.js
  • scrollmagic/minified/plugins/animation.gsap.min.js

CDNの場合は以下を読み込んでください。

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js

「debug.addIndicators.min.js」はデバッグ用です。

ScrollMagicだけなら本体のファイルのみで動きますが、今回はTweenMaxを使ってアニメーションを実装するので、「animation.gsap.min.js」も読み込む必要があります。

実装の手順

必要なファイルを用意したところで、実際に実装していきます。

See the Pen
ScrollMagic&TweenMax
by KUBO (@KUBOGEN)
on CodePen.

ちなみにcodepenでは以下のファイルを読み込んでいます。

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js

まずはHTMLのアニメーションを実装する要素にクラスをつけます。

HTML
<p class=”scroll-fadeIn”>フェードイン1</p>
<p class=”scroll-fadeIn”>Lorem ipsum dolor sit amet, 〜.</p>

<p class=”scroll-fadeIn”>フェードイン2</p>
<p class=”scroll-fadeIn”>Lorem ipsum dolor sit amet, 〜.</p>

今回はフェードインさせる要素に「scroll-fadeIn」というクラスをつけました。

次にCSSでアニメーションを設定します。

CSS
.scroll-fadeIn {
 opacity: 0;
 transform: translateY(20px);
 transition: 2s ease;
}
.scroll-fadeIn.show {
 opacity: 1;
 transform: translateY(0px);
}

下からふわっと表示されるようなアニメーションを設定しました。

opacityで非表示になっている状態から、「show」というクラスをつけることでアニメーションします。

次にJSで「scroll-fadeIn」の要素に対してScrollMagicで「show」をつけるタイミングなどを制御します。

JS
$(function(){
 var controller = new ScrollMagic.Controller();
 var scene = new ScrollMagic.Scene({
  triggerElement: ‘.scroll-fadeIn’,
  triggerHook: “onEnter”,
  reverse: false
 })
  .setClassToggle(‘.scroll-fadeIn’, “show”)
  .addTo(controller);
});

これでスクロールした際にフェードインするようになるのですが、今のままでは一つ問題があります。

それは、要素が一つの場合ならいいのですが、複数の要素にこのアニメーションを実装する際、複数の要素に同じクラスをつけると、最初の要素がすべての要素のトリガーになってしまいます。

つまり、最初の要素にスクロールした時点で、同じクラスがついている他の要素まで、スクロールしていないのアニメーションが実行されてしまうということです。

そこで、JSを以下のように書き換えます。

JS
$(function(){
 var controller = new ScrollMagic.Controller();
 $(“.scroll-fadeIn”).each(function(i, node) {
  var scene = new ScrollMagic.Scene({
   triggerElement: node,
   triggerHook: “onEnter”,
   reverse: false,
  })
   .setClassToggle(node, “show”)
   .addTo(controller);
 });
});

See the Pen
ScrollMagic&TweenMax-each
by KUBO (@KUBOGEN)
on CodePen.

それぞれの要素にスクロールしたタイミングでアニメーションするようになりました。

Leave a Comment