ふんばりフロントエンジニアのブログ

新米フロントエンジニアの備忘録です。ふんばり温泉タオル欲しい...

人気ライブラリ「TweenMax」と「ScrollMagic」で簡単にスクロールアニメーションを実装!

さて、今回はアニメーションライブラリを使ってみよう!というお話です。

そして今回ご紹介するのは「TweenMax」と「ScrollMagic」、TweenMaxは日本でそこまで知名度があるわけではないですがアメリカではかなり人気のライブラリのようですね。

ただアニメーションの実装をするだけなら「TweenMax」だけで済みますが、やはり最近流行っているのは「スクロールして要素とぶつかったらアニメーション」というパターンでしょう。

ということで、よしなにスクロール時のイベントを設定できるScrollMagicについてもお話していこうと思います。

人気ライブラリ「TweenMax」と「ScrollMagic」の基本を解説!

TweenMaxの基本

最近取り組んでいる案件がアニメーションを実装してほしいとのことだったのですが、実際簡単なものならcssのanimationで出来てしまいます。

でもスクロールして要素とぶつかったらアニメーションを追加したりクラスを追加したり…って割とめんどくさいなあと思いましてね。(何よりコーディング期間が短いんですよね汗)

ということで使ってみようと思ったのがまずTweenMaxです。

TweenMaxはcssプロパティやアニメーションの設定をすることで、簡単にアニメーションを作ることができるライブラリ。

とりあえずサンプルを見てみましょう!


See the Pen
TweenSample1
by nakajima masahiro (@nakajima333ta)
on CodePen.

これは要素を消したり出したり、という簡単なサンプルです。

TweenMaxを使えるようにするには、↓からダウンロードするかCDNで読み込むか、またnpmでinstallするか、という方法がありますがオススメはnpmですね。

さて、コードを見ていくと非常にシンプルになっています。

使い方を解説すると、

TweenMax.アニメーション方向("ターゲット",アニメーションにかける時間,{cssプロパティ});

という感じですね。

もともとjQueryプラグインなのでターゲットの書き方もjQueryのように書けるのがお手軽感マックスです。

まず、TweenMaxには大まかにわけて二つのアニメーション方向がある、と言っていいでしょう。

それが「to」と「from」の二つ。

toは指定したcssプロパティ「へ」向かっていくようなアニメーションになりますが、fromはtoの逆で指定したcssプロパティ「から」元の形や位置に戻っていきます。

そのため、上記の例で指定しているcssプロパティは同じですがアニメーションの動きは逆になるんですね。

これさえ分かれば、ちょっとしたアニメーションならささっとできるようになるでしょう。

TweenMaxについてもっと詳しくお話していきたいのですが、種類がありすぎて解説しきれないのでこの辺でTweenMaxについてはやめておこうかと...

追記:TweenMaxのcycleプロパティについて解説してみました!
hubarifront.hatenablog.com

公式はドキュメントやデモが充実しているのでご興味のある方はご覧になって見てください。
greensock.com
greensock.com

「ScrollMagic」の基本

ScrollMagicはスクロール中に指定した要素を監視してくれるライブラリです。

ライブラリを使わなくても書けるっちゃ書けるのですが、やはり楽...いや便利なんですよね。

ということでこちらもサンプルから見ていきたいと思います。


See the Pen
scrollMagicPinSample
by nakajima masahiro (@nakajima333ta)
on CodePen.


こちらは#targetが出てくるときに、#targetをピン止めするという処理です。

まず、ScrollMagicを使う上で押さえたいポイントはコントローラーとシーンですね。

コントローラーはシーンを管理する大元、シーンはどこをターゲットにするか、などというような細かい設定を書くものと押さえておきましょう。

コントローラーは一回インスタンスを作れば、どんどんシーンを追加していけるので基本的にはコントローラの宣言は一回だけで良さそう。

そして肝心のシーンですが、基本構文はこんな感じです。

var 変数名 = new ScrollMagic.Scene({ 
triggerElement: "監視対象",
duration: 数値,
 })
.処理
.addTo(コントローラー名);

triggerElementに指定するのは、監視対象です。
つまりこのtriggerElementに指定した要素までスクロールすると、下に書いた処理が実行されます。
処理は「.」で繋げて書くことができ、最終的に「.addTo(コントローラー名);」することがお決まり。
最後にコントローラに追加しないといけないので注意しておきましょう。
こちらも公式のドキュメントが豊富なので詳しいことは↓から...
scrollmagic.io

追記:ScrollMagicのonメソッドについて解説してみました!
hubarifront.hatenablog.com

TweenMaxとScrollMagicを組み合わせよう!

さて、それぞれを簡単に解説していきましたがこれらをどのように組み合わせれば良いのでしょうか?
まあScrollMagicの処理の所にTweenMaxの処理を書けば良さそうですよね笑
ということで、完成したのがこちらの処理です。


See the Pen
TweenMax&ScrollMagic_sample
by nakajima masahiro (@nakajima333ta)
on CodePen.

追記:関数化してみたやつ↓
hubarifront.hatenablog.com


ScrollMagicで監視対象を指定して、要素とぶつかったらsetTweenというメソッドを使って、変数に格納しておいたTweenアニメーションを作動させています。
ちなみにsetTweenは「animation.gsap.js」というファイルを読み込まないと使えないので注意してくださいね。
また、このように「addIndicators」を記述すると簡単にどこからアニメーションが始まるのかをデバッグすることができるので使った方がより作業が捗ると思います。
https://codepen.io/nakajima333ta/pen/mzVwWOcodepen.io
どのようなタイミングでアニメーションが動いているのかをこれまたお手軽に確認することができるので、開発時には以下を書いておくといいでしょう。

.addIndicators( {name:"インジケータの名前"} )

シーンごとに名前をつけて管理できるのもいいですよね。
こちらも利用するには別で「debug.addIndicators.js」を読み込む必要があるので注意してください。
では最後にnpmでこれらを利用する際の手順を書いて終わりにします!

npmでTweenMaxとScrollMagicを使おう!

①npmでgsapとscrollmagicをインストール

npm install gsap scrollmagic

②jsファイルでimport ※import-loaderを使わないと上手く行かないので注意!

import {TweenMax,TimelineMax} from "gsap";
import ScrollMagic from "scrollmagic";
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators';

③スタート!
結構簡単に使えますね!
ただimportでエラーが起きたりと最初につまづいてしまったので、時間が結構かかりました...
スクロールアニメーションを使ってみたい!という方の参考になると嬉しいです^^