GSAPで高度なアニメーション実装

はじめに

こんにちは🧑‍💻
ラボルのUIデザイナー/フロントエンドエンジニアの寺岡です。

今回は「GSAP」というアニメーション制作ライブラリの紹介になります。
Webサイトに動きのあるデザインを実装したいな〜と思っている方にオススメです。

GSAPとは？

UIアニメーション制作に特化したJavaScriptライブラリです。読み方はGSAP(ジーサップ)です。
JavaScriptだけで記述できるので、特別なスキルは必要なく、GSAPの記法さえ覚えてしまえば簡単にアニメーションが実装できてしまいます。

今回はそんなGSAPの必要性と、基本的な実装例を紹介していく記事になります。

UIアニメーションの必要性

まず、GSAPを説明する前に「そもそもWebでアニメーションって必要なの？」という疑問について解消していきます。

結論としては、アニメーションはUIの注目度や明快さを向上させるために必要です。

必要な理由としては以下2点が挙げられます。

UIの変遷(トランジション)やユーザーの操作に対する応答(インタラクション)の理解を促すため
「アクションに対し何が起こったか」をわかりやすくするため

例として、以下のDemoで比較していきましょう。
SNSとかでよくあるいいねボタンですが、クリックした際に「アニメーションなし/あり」それぞれでどう感じるか比較してみてください。

「アニメーションなし」の方は、背景色がグレー⇄ピンクで切り替わっているだけです。
「アニメーションあり」の方は、以下3つのアニメーションが実行されます。

ハートマークがポヨンと大きくなる
白い輪っかのエフェクトが出現する
花火のようなドットが出現する

こういった一手間のアニメーションが加わるだけで、UIの操作に対してどのような反応が起きたかが理解しやすくなります。

GSAPを導入する理由

次に、GSAPを導入するメリットを説明します。

1. アニメーションの実装難易度が低い

GSAPは細かな動きを直感的に、かつ簡単に実装できます。
CSSやjQueryでのアニメーションもある程度は実現可能ですが、たとえば上記のいいねボタンをCSSやjQueryで実装しようとすると、なかなか大変な作業なのはわかりますよね。

2. アニメーションの管理がしやすい

JavaScriptにアニメーション処理を記述するため、変数で管理することによってアニメーションの速度や移動距離を変えたいなどの変更がしやすい点も管理しやすいと言えるでしょう。
後述するTimeline機能を使えば、対象ごとにアニメーション処理を変更しやすくもあります。

3. 安定性がある

CSSでアニメーションを実装する方なら経験あるかもしれないですが、一部CSS animationのプロパティは特定のデバイス・ブラウザで挙動しないことがあります。
例えばiOSのchromeだと、ページ読み込み時にtransitionが発火してしまうケースがよくあります。
-webkit-transitionなどのベンダープリフィックスをつけるといった回避策はありますが、こういった不安定なリスクを排除したいのであれば、JavaScriptでのGSAPによるアニメーション実装の方針に切り替えた方が得策です。

GSAPのインストール方法

通常のライブラリと同じくCDNやnpm installなどで導入できるので、お好きな方法でインストールしてください。
詳しくはGSAP Installationを参照してください。

CDNの場合

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

npmの場合

$ npm install gsap

yarnの場合

$ yarn add gsap

基本的な実装例

ここではよく使われる基本的な実装例を紹介していきます。
詳しくはDocsをご参考ください。

Method

GSAPのTweenと呼ばれるアニメーション操作のメソッドです。

CodePenのDemoにある4つのメソッドは、それぞれ以下の違いがあります。

メソッド	コード	x座標の動き
to	`gsap.to('#box', {x: 200})`	0 → 200に移動
from	`gsap.from('#box', {x: 200})`	200 → 0に移動
fromTo	`gsap.fromTo('#box', {x: -200}, {x: 200})`	-200 → 200に移動
set	`gsap.set('#box', {x: 200})`	0 → 200に瞬間移動