サイト制作で利用できるアニメーションはいくつかりますが、今回は、GSAP（GreenSock Animation Platform）を使ってアニメーションを作ってみる事にしました。Googleも推奨というだけあって、とても軽快で、機能も豊富なGSAP。
本格的なアニメーションも作る事が出来るようですが、ひとまず画像表示時のアニメーションをご紹介していきます。

GSAPとは

SVGアニメーションやオブジェクトのアニメーション化など様々な機能に加え、必要であればプラグインも用意されています。
また、モジュール構造で、とても軽量なのでクライアントPCに負荷をかけないのも特徴です。
複雑なアニメーションを掛ける事も出来るアニメーションプラットフォーム。
GSAPサイトでは「開発者をアニメーションのスーパーヒーローに変えるJavaScriptのツールセット。」と言っているとおり沢山の可能性を与えてくれる、これがGSAPです。
ほとんどの機能を無料で利用できますが、プラグインなど利用する方はライセンスより確認してみましょう。

準備

ZIPファイル・GitHub・CDNから好きな方法で準備しましょう。
今回は、コードペンを利用しているのでCDNを利用しました。

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js

画像表示時のアニメーション

ターゲット部分に指定したい要素のID名やクラス名を入れることで、自由なアニメーションを作成することができます。

gsap.to()

to()で指定した要素にアニメーションします。

gsap.to( ターゲット, アニメーション秒数, { 
	cssプロパティ: 値,
  delay: 開始時間
} );

gsap.from()

from()で指定した値から、CSSで設定した状態までアニメーションします。

gsap.from( ターゲット, アニメーション秒数, { 
	cssプロパティ: 値,
  delay: 開始時間
} );

gsap.fromTo()

to()、from()メソッドをまとめてアニメーションします。

gsap.fromTo( ターゲット, アニメーション秒数, { cssプロパティ: 値,delay: 開始時間}, { cssプロパティ: 値,delay: 開始時間 } );

gsap.to()、gsap.from()、gsap.fromTo()の挙動はこんな感じです

See the Pen
【partsアニメーション01】 by kurofunen (@kurofunen)
on CodePen.

画像表示時のアニメーション

今回はgsap.toを利用して作ってみました。
ページ送りやホバーアニメションでも使えるかと思います。
因みに、全てのアニメションに共通でホバーアクションも入れているのでよろしければホバーして確認してみて下さい。
なお、動きの確認は右下の「Return」ボタン、アニメーションの再読み込みができるので確認してみて下さい。もしくは「EDIT ON　CODEPEN」の部分でをクリックしてコードペン上からも確認頂けます。

カーテンのように表示させる

片方のカーテンをサラッとめくるイメージで作ってみました。
ボタンなどのホバー時に設定しても邪魔にならず指定出来るかと思います。

See the Pen
MWbYPbp by kurofunen (@kurofunen)
on CodePen.

右開き左開き

画像の上の2枚の要素を右に開いて左に開くアニメーションです。
ページ送りの時に入れると良いかと思います。

See the Pen
左から右開き by kurofunen (@kurofunen)
on CodePen.

両開き

こちらも画像の上の2枚の要素を動かしています。
先に片方のカーテンのアニメーションを紹介しましたが、今度は真ん中から両側に開くイメージです。

See the Pen
WNoQQZj by kurofunen (@kurofunen)
on CodePen.

真ん中スリットから開く

画像の上下中央一本ラインから全面に要素を広げてみました。
ホバーアクションやページ送りというよりもFVなどで利用すると良いと思います。

See the Pen
真ん中スリットから開く by kurofunen (@kurofunen)
on CodePen.

四方攻め

画像の上に4方向から要素を集めてみました。
こちらもホバーアクションやページ送りというよりポイント的にFVなどで利用すると良いかもしれません。

See the Pen
四方攻め by kurofunen (@kurofunen)
on CodePen.

最後に

いかがでしたでしょうか？
アイデア次第で本格的でおもしろい物が出来るのGSAP。
今回はgsap.to()のみを利用していたのですが、複数の要素をまとめてアニメーションをしたり、様々なアクションで利用していく事が出来るので、とても魅力的なGSAP。今後もパターンを増やして続編を書いて行ければと思います。