ScrollMagicとTweenMaxを使ってアニメーションさせる方法！
ScrollMagicとTweenMaxを使ってアニメーションさせる方法について解説します。ここではScrollMagicとTweenMaxを使ってアニメーションさせるサンプルをいくつか作成し、そのコードの解説まで行います。
ScrollMagicとTweenMaxでアニメーションを実装したい
アニメーションを簡単に実装できるTweenMaxと、スクロールに応じてアニメーションを実装できるScrollMagicを用いて、少し複雑でユーザーを惹きつけるようなアニメーションを実装するケースを考えましょう。
この方法について以下でいくつかのサンプルコードを取り上げて解説します。
ScrollMagicとTweenMaxを使ってアニメーションさせる方法
ScrollMagicとTweenMaxを使ってアニメーションさせる方法を紹介する前にまずScrollMagicとTweenMaxを用いるのに必要となる以下のCDNを読み込みましょう。
なおインジケータープラグインはなくてもいいです。インジケータープラグインはデバッグの用途で本番のサイトでは無いほうが良いです。
事前準備
ScrollMagicとTweenMaxをCDNから読み込む
<!-- jQuery本体 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- TweenMax本体 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<!-- ScrollMagic本体 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<!-- ScrollMagicのデバッグインジケータプラグイン -->
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js"></script>
<!-- ScrollMagicのTweenMaxプラグイン -->
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>基本の使い方
ではScrollMagicとTweenMaxを使ってどのようにアニメーションするのか、サンプルコードを用いて挙動を見てみましょう。
下にスクロールしていただくと、ボックスが3つ同時に2倍の大きさになることが分かります。
まずScrollMagicを用いる準備として、下記を記述します。
ScrollMagicを使う準備
const controller = new ScrollMagic.Controller();TweenMaxの使い方を簡単に解説します。
TweenMax.to(要素, 秒, アニメーションの内容)メソッドでアニメーションの内容を記述します。TweenMax.toの中身はアニメーションさせたい要素、何秒かけてアニメーションさせるか、アニメーションの内容となります。
これをScrollMagicにセットすることで使えるようになります。
次に適当な変数にScrollMagicのオプションを格納します。今回はtriggerというIDを持った要素を監視したいので、triggerElementに#triggerと記述しました。
最後に.setTween(tween)でScrollMagicにTweenMaxをセットし、.addTo(controller)でScrollMagicを起動しています。
.addIndicators()は機能するかテストする時のみ用います。
応用技
では次にScrollMagicとTweenMaxを使ってスクロールに合わせてアニメーションさせる方法について解説します。
ではサンプルコードを用いて挙動を見てみましょう。
上記のサンプルコードではsetPinによって指定した要素が留められた状態でアニメーションされています。
またボックスのサイズが大きくなるアニメーションは3つ同時にではなく、スクロールに合わせて順に適用されています。
ではTweenMaxとScrollMagicのコードの解説をします。
TweenMax
それぞれの要素が違うタイミングでアニメーションを行うようにするために、適当な変数にnew TimelineMax()を設定します。
次にstaggerTo()メソッドにアニメーションの内容を設定します。
staggerTo()メソッドの中には、アニメーションさせたい要素、何秒かけてアニメーションさせるか、アニメーションの内容、何秒ごとに実行させるかを設定します。
ScrollMagic
今回ScrollMagicオプションとして、新たにdurationとtriggerHookを用いています。
このdurationによって今回アニメーションの終了までの距離を増やしています。今回は200%としましたが、適宜サイトに合わせて調整しましょう。
またtriggerHookでは0とすることで、要素が画面最上部にきた段階でアニメーションするように設定しています。
最後のsetPinで要素を固定しています。これによりスクロールしても要素が固定され流れなくなります。
まとめ
いかがでしたでしょうか？
ScrollMagicとTweenMaxを用いることで、CSSだとコードが複雑になってしまうアニメーションを簡単なコードで実装することができます。
ぜひこの記事を参考にして、ScrollMagicとTweenMaxを用いてアニメーションを作成してみてください。
