高機能なJavascriptライブラリ
「TweenMax.js」を使ってみました。

本日は表題の通り、高機能な Javascriptライブラリ「TweenMax.js」をご紹介いたします！
これは、GreenSock社が開発した、アニメーション特化型のライブラリとなっていて、複雑なアニメーションをシンプルな記述で実現できるライブラリとなっています。
今回は、基本的な使用例を2つほどご用意いたしました。使用例では、jqueryとTweenMaxの2つのライブラリを使用しておりますので、もしご自身で試される際はご注意ください。
（実際にはjqueryを読み込まなくても、TweenMaxを使用することが可能です。）

TweenMaxの基本構文

まずは、基本的な構文からご紹介いたします。

TweenMax.【メソッド】(【対象要素】, 【秒数(単位: s)】, {【詳細設定】}, …)

これが基本的な構文です。今回は、たくさんあるメソッドのうち、「.to()」, 「.fromTo()」に絞ってご紹介いたします。
また、秒数指定を「ms」で指定しないように注意してください。
詳細設定については、以下でご説明いたします。

TweenMax.to()

まずは、デモをご覧ください。

領域内を下にスクロールして行くと、「.fade_obj」という要素が徐々に現れ、上に戻るとまた消えていくと思います。
このアニメーションには「TweenMax.to()」というメソッドを使用しています。
処理内容はとても単純で、取得したスクロール量をそのまま「opacity: *」の値に代入していくのみです！
このように、.to()メソッドは、
「あらかじめ指定された初期値から、その値までアニメーションする」というものです。
つまり今回は、スクロール量が変化するごとに、「0秒」かけて、
「スクロール量/ 3000」の値まで、opacityの値を変化させていく、となります。
それでは次に、「.fromTo()」メソッドをご紹介いたします。

TweenMax.fromTo()

まずは、デモをご覧ください。

赤と青のドットが交互に消えたり現れたりしていると思います。
このアニメーションには「TweenMax.fromTo()」というメソッドを使用しています。
.fromTo()メソッドは、
「指定した状態から指定した状態まで、アニメーションする」というものです。
先ほど紹介した.to()メソッドとの違いは、あらかじめ状態を指定していないことです。
すなわち、fromTo()メソッドでは、「初期状態（from）」と、「アニメーション完了状態（to）」の2つを指定する必要があります。
コード内のコメントアウトにその場所を記述していますが、{}で括られた”詳細設定”部分が2つあるのが分かると思います。

詳細設定について

最後に、fromTo()メソッドのコード内でいくつか指定している詳細設定内容について、簡単にご説明いたします。
設定しているのは「repeat」、「yoyo」、「ease」の3種類です。

まず、「repeat」についてですが、これはその名の通り、アニメーションの繰り返し指定です。
整数値で「繰り返し回数」を指定します。さらに、今回のように「-1」を指定すると、無限回のループが指定できます。

次に「yoyo」についてです。個人的にこの名前がすごく好きです（笑）。かわいくて、つい必要ないところで使ってしまいそうです（?）。
さて、この指定は、「アニメーションが往復するかどうか」の指定になります。trueで往復します。
「往復」とういうのが少しわかりにくいですが、例えば、今回の場合、これを指定しないとopacityが一旦修了値に達したら、初期値からまたアニメーションがスタートします。
そうではなくて、終了値から初期値に向けてアニメーションしながら戻りたい場合に有効な指定です。
1点注意ですが、この指定は「repeat」が指定されている時でないと意味を持ちません！必ずセットで指定するようにしてください。

最後に「ease」ですが、これはアニメーションを指定する際にはお馴染みの「イージング」の指定です。
この指定の方法はとても種類が多いのですが、公式サイトにイージングを決める際にとても便利なページ（https://greensock.com/get-started#easing）がありますので、お気に入りのイージングを探して見てください！

まとめ

いかがでしたでしょうか。とても奥が深いライブラリなので、様々なアニメーションを考えて、実装してみるのも面白そうですね。
ぜひ、お試しください！

GreenSock公式サイト: https://greensock.com/