はじめに
こんにちは🧑💻
ラボルの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に瞬間移動 |
Property
Propertyはどのような変化が行われるかを記述するところです。
gsap.to('#box', {x: 200})と記述するとboxが「x座標に200px移動」するという変化が発生します。Propertyは{x: 200}の部分です。
Propertyにはアニメーション時間や繰り返し設定なども記述することが多いので、よく使う設定を紹介します。
Easing
Easingは、時間の経過に伴うアニメーションの変化率のことで、値を変えることでアニメーションの印象もガラッと変わります。
とにかくたくさん種類があるので、お好きなものをコチラから選んでください。
任意で、Easingの値をカスタムすることもできます。
Easingを指定しない場合、power1.outがデフォルトでセットされます。
Handling
アニメーションが始まった/完了したタイミングで処理をハンドリングしたい時があります。
例えば以下のDemoだと、各タイミングで以下の処理が実行されます。
- アニメーションが完了した時:
console.log("complete") - アニメーションが始まった時:
console.log("start") - アニメーションが更新された時:
console.log("update") - アニメーションが繰り返された時:
console.log("repeat")
Stagger
Staggerを設定すると、複数のセレクタのアニメーションが順番に実行されます。
例えば以下のDemoだと「x座標に200px移動」が「0.2sごと」に実行されます。
Timeline
より高度なアニメーションを実装する時に必ずと言っていいほど使用機会のあるTimeline機能の紹介です。
timeline()内で処理を初期化して、続けて個別に実行したいアニメーション処理を記述します。
以下のDemoだと、opacity: 0は全ての要素に適用され、box1から順番に処理が実行されていきます。
CodePenで「GSAP Timeline」で検索すると色々な作品がありますので、眺めてみてください。
以下の作品とかTimelineフル活用してます。（すごい）
まとめ
今回はアニメーション実装ライブラリである「GSAP」の紹介でした！
より高度なアニメーションを簡単に実装してみたい方は是非導入してみてください。
また、今回紹介したGSAPの基本的な実装例を一覧にしてCodePenに公開しているので、是非参考にしてください！
※restartボタンを押したら各アニメーションが再発火します。
最後に
ラボルでは、エンジニアを積極採用中です。1、2年目のエンジニアから経験豊富なテックリードやエンジニリングマネージャーまで、興味がある方はぜひご応募ください!!
