こんにちは、NNCの中里です。

今回はGSAPでアニメーションを使いこなすために必要な基礎知識を徹底的にまとめてみました！
導入や基本文法からアニメーションのサンプルまでまとめているので、GSAP学習中の方もこれからGSAPを学習される方も是非ご覧ください！

GSAP（ジーサップ）とは？

まずGSAPって何？という方に向けて弊社で書いた以前の記事から引用したいと思います。

GSAPとはアニメーション実装に特化したJavascriptライブラリです。GreenSock社が開発したライブラリで、高機能かつプラグインも豊富に用意されている優れものです。
もちろん、ちょっとしたアニメーションであればCSSやjQueryでも実装は可能です。しかし、スクロールと連動したインタラクティブなものであったり、時間差や連続性のあるアニメーションを作ろうとすると、この2つでは難しい・あるいは不可能な場合が出てきます。
そういった複雑なアニメーションの実装を容易にしてくれるのが、GSAPの魅力です。

他のライブラリと比較をすると立ち位置が明確になります。
jQueryはHTMLの操作、Three.jsは3Dの操作に特化しているのに対して、GSAPはアニメーション表現に特化したJavaScriptライブラリとなります。

導入方法

続いて導入方法です。

こちらも以前の記事にまとめていますが、公式よりライブラリデータをダウンロードしてgsap.min.jsファイルへリンクを貼るか、CDNでリンクを貼って利用しましょう。

CDNの記述：

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

※上記は2023年12月現在の最新版ですので、時期によっては公式で最新版をコピーしていただくことを推奨します

基本文法

ライブラリにリンクを貼ったら早速簡単な命令文を書いてみましょう。

GSAPの基本文法はとてもシンプルで、考え方としては以下のようになります。

gsap.メソッド(ターゲット,パラメータ)

具体例としてgsap.to()というメソッドの文法と命令文の記述例を紹介します。

gsap.to(target, vars);

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

上の例ではX座標,Y座標,スケールが変化するアニメーションが再生されます。
パラメータで指定している各プロパティと値によって、具体的にどのようにアニメーションさせるかを指定しています。

これまでJavaScrptやライブラリに触れたことがある方にとっては理解しやすい文法ですね。
とは言えこれくらいのアニメーションであればCSSでも制御できます。
GSAPの方が記述が多少短くなるくらいの差かもしれませんね。

TweenとTimeline

GSAPは主にTweenとTimelineという2つの主要な概念から構成されます。
基本文法やTweenとTimelineの理解が深まることで、アニメーションを実装しやすくなります。

Tweenとは？

Tweenはアニメーションの基本となるもので、ある状態から別の状態への変化をアニメーションで表現します。

AdobeのFlashやAnimateを使ったことがある方は、モーショントゥイーンを使ったキーフレームアニメーションを想像してもらうと分かりやすいかもしれません。

例えば、ある要素の不透明度を最初は1（100%）、5秒後に0（0%）と設定した場合、要素が5秒間かけて透明になるアニメーションが実行されます。

これを利用して要素の位置・サイズ・透明度などのプロパティを変化させるアニメーションを表現します。

記述例：

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

説明 :

Timelineとは？

TimelineはTweenをまとめ、アニメーションの時間軸やタイミングを制御するためのものです。

これもまたAdobeのFlashやAnimate、もしくは一般的な映像編集ソフトを使ったことがある方は、いわゆるタイムラインを想像してもらうと理解しやすいと思います。

タイムラインを操作することで複数のTweenや他のTimelineを順番に実行したり、同時に実行したりすることができます。

記述例：

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

説明 :

このアニメーションに関しては、CSSと比較した際にGSAPの方が命令が出しやすい印象です。
CSSで制御すると、ちょっと記述や考え方が面倒になりそうですよね。
シンプルな記述でタイムラインを制御できるというのは、GSAPの大きな特徴かと思います！

GSAPでよく使うプロパティ

移動（x,y）

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

xはCSSのtransform: transrateX()を、yはCSSのtransform: transrateY()を制御します。
上の記述ではトゥイーンによって円を移動しています。

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

上の記述ではタイムラインによって円を移動しています。

拡大・縮小（scale）

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

scaleXはCSSのtransform: scaleX()を、scaleYはCSSのtransform: scaleY()を制御します。
上の記述ではトゥイーンによって円を拡大しています。

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

上の記述ではタイムラインによって円を拡大しています。

XスケールとYスケールを同時に変更する場合scaleプロパティでまとめて指定します。

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

回転（rotation）

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

rotationはCSSのtransform: rotate()を制御します。
上の記述ではトゥイーンによって正方形を回転しています。

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

x軸回転やy軸回転を個別に行う場合、rotationX,rotationYというプロパティを使います。
上の記述ではタイムラインによって正方形を回転しています。

歪み（skew）

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

skewX,skewYはCSSのtransform: skew(x,y)を制御します。
上の記述ではトゥイーンによって正方形を歪ませています。

時間制御について（duration,delay）

GSAPではdurationとdelayという2つの時間制御があります。

• ・duration:アニメーションの開始から完了までの時間を指定
• ・delay:アニメーション開始までの時間を指定

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

上の記述では読み込んでから2.5秒後にアニメーションを開始、5秒間かけて円を5倍の大きさにアニメーションを実行します。

アニメーションの繰り返し（repeat,repeatDelay,yoyo,yoyoEase）

GSAPではrepeat,repeatDelay,yoyo,yoyoEaseを使って繰り返しを制御します。

• ・repeat:繰り返しの回数を指定（-1で無限）
• ・repeatDelay:繰り返し実行する際の遅延を指定
• ・yoyo:繰り返す時にアニメーションを反転するかを指定（trueで反転）
• ・yoyoEase:反転する際のイージングを指定

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

イージング関数一覧表

GSAPではイージング関数を使いアニメーションの速度変化（加速や減速）を制御します。

イージング関数	バリエーション	説明	イメージ
power0 (Linear)	.none	等速でアニメーションする（加速・減速なし）。
power1 (Quad)	.in	ゆっくり開始し、加速する。
	.out	加速した後、ゆっくり終了する。
	.inOut	ゆっくり開始し、加速し、中間で最速になった後、減速する。
power2 (Cubic)	.in	power1 よりも強い加速で開始する。
	.out	power1.out よりも強く減速して終了する。
	.inOut	power1.inOut よりも強い加減速がある。
power3 (Quart)	.in	power2 よりも急激に加速する。
	.out	power2.out よりも急激に減速する。
	.inOut	power2.inOut よりも急激な加減速を持つ。
power4 (Quint)	.in	power3 よりも極端に加速する。
	.out	power3.out よりも極端に減速する。
	.inOut	power3.inOut よりも極端な加減速を持つ。
back	.in	逆方向に少し戻ってから加速する。
	.out	目標地点を少し超えてから戻る。
	.inOut	開始時に少し戻り、終了時も少し超えてから戻る。
bounce	.in	バウンドの逆バージョン（落下ではなく跳ね上がるような動き）。
	.out	自然なバウンド（床にぶつかるような動き）。
	.inOut	開始時と終了時にバウンドが発生する。
circ	.in	円弧のように滑らかに加速する。
	.out	円弧のように滑らかに減速する。
	.inOut	円弧のような加速と減速の両方を持つ。
elastic	.in	ゴムのように一度縮んでから勢いよく進む。
	.out	目標地点を過ぎてからバウンドしながら落ち着く。
	.inOut	開始時と終了時に弾む動きが入る。
expo	.in	ゆっくり開始し、急激に加速する。
	.out	急激に減速しながら終了する。
	.inOut	両端でゆっくり、中間で爆発的に加速する。
sine	.in	なめらかに加速する（サイン波のような動き）。
	.out	なめらかに減速する。
	.inOut	全体的にスムーズな加速・減速を行う。

イージング関数の適用方法

GSAPでイージングを適用するには、以下のように ease を指定します。

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

アニメーションサンプル

ここまで紹介してきたtween・timeline・プロパティなどを組み合わせるだけでも簡単なアニメーションを作成できます！

要素が順番に表示するオープニングアニメーション

完成例（動画）：

コードの記述：

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

アニメーション実装の流れ：

1. 1. headerを拡大
2. 2. h1を表示
3. 3. h1を拡大しながら非表示
4. 4. .contentを表示
5. 5. h2を上から下にスライドしながら表示
6. 6. .circleを右から左にスライドしながら表示
7. 読み込んでから11秒後に.circleを回転

1〜6までは順番に実行されるようtimelineで制御し、7はtimelineアニメーションが完了してから1秒後に実行するように指示しています。

GSAPの導入方法と基本文法〜TweenとTimeliineについてまでを動画で紹介

動画で学びたい！という方に向けて今回の内容をYouTubeにアップしています。
今回の記事とほとんど同じ内容になりますが、音声と動画の方が理解しやすいという方はご覧になってみてください！（「わかりやすかった！」という方は高評価していただけると喜びます）

まとめ

今回はGSAPの入門編ということで、導入方法・基本文法からTweenとTimelineを紹介しました！

TweenやTimelineといった映像編集における概念を言語で操作できるところが大きな特徴ですね。
またそれらを操作しやすいシンプルな文法で学習しやすいライブラリと言えます。

基本的な概念を理解して応用をさせることで、CSSやjQueryなどでは表現しづらい複雑でインタラクティブなアニメーションを作成できるようになります。
Web制作の高度なアニメーション表現として、積極的に取り入れていきたいライブラリですね！