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

JavaScriptのライブラリである「TweenMax」と「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
フェードイン１
Lorem ipsum dolor sit amet, 〜.

フェードイン２
Lorem ipsum dolor sit amet, 〜.

今回はフェードインさせる要素に「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 X