こんにちは、NNCの中里です。
当サイトで以前にGSAPに関する記事を紹介しましたが、改めて導入部分や基本文法から知りたい方に向けてまとめてみました！

またGSAPの主要概念であるTweenとTimelineについても具体的に紹介していきます！

今回の記事は動画でも紹介していますので、動画でご覧になりたいという方はこちらからご覧ください。（このページの下へ移動します）

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);

gsap:
GSAPライブラリを示します。

to:
アニメーションのTweenを作成するメソッドです。
メソッドはアニメーションの作成・管理・制御に関する機能を設定するものと考えます。
GSAPには様々なメソッドがあります。

target:
アニメーションの対象となる要素やオブジェクトです。
CSSセレクタ、DOM要素、またはJavaScriptオブジェクトが指定されます。

vars:
アニメーションのパラメータを指定するオブジェクトです。
変化させたいプロパティ、アニメーションの時間（duration）、イージング（ease）などが含まれます。

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

上の例ではX座標,Y座標,スケールが変化するアニメーションが再生されます。

パラメータで指定している各プロパティと値によって、具体的にどのようにアニメーションさせるかを指定しています。

これまでJavaScrptやライブラリに触れたことがある方にとっては理解しやすい文法ですね。

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.

説明 :

target: アニメーション対象の要素やオブジェクト（CSSセレクタ、DOM要素、またはJavaScriptオブジェクト）を指定します。

property: value: アニメーションしたいプロパティと目標の値を指定します。

duration: アニメーションの時間を秒単位で指定します。

ease: イージング関数を指定します。アニメーションの進行速度を制御します。

Timelineとは？

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

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

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

例：

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

説明 :

gsap.timeline(): タイムラインを作成します。

to(): タイムラインにTweenを追加します。

target: アニメーション対象の要素やオブジェクトを指定します。

property: value: アニメーションしたいプロパティと目標の値を指定します。

duration: アニメーションの時間を秒単位で指定します。

ease: イージング関数を指定します。

“-=2.5”: タイムライン内のアニメーションを調整、先行するTweenの終了時間を2.5秒遅らせます。
一つ目のアニメーションが開始してから2.5秒後に二つ目のアニメーションが実行され、二つのアニメーションが同時に完了します。

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

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

まとめ

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

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

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