アニメーションライブラリ「GSAP」の基本！to、set、from、fromToメソッドの使い方

GSAP（GreenSock Animation Platform）は、おしゃれなギミックを取り入れたWebサイトを制作する際に便利なアニメーションライブラリです。

GSAPを使えば、複雑な動きも短いコードでスムーズに実装でき、サイト全体の印象やクオリティを大きく高めることができます。

今回は、「GSAP」のインストール方法やよく使われる基本メソッド「to・set・from・fromTo」の使い方を解説します。

※本記事執筆時点のGSAPバージョンは、「3.13.0」です。ご利用の時期や環境によっては、内容が異なる場合がありますので、あらかじめご了承下さい。

GSAPとは？

ドキュメント：http://gsap.com/docs/v3/

GSAP（GreenSock Animation Platform）は、おしゃれなギミックを取り入れたWebサイトを制作する際に便利なアニメーションライブラリです。

非常に高機能なアニメーションライブラリで、以下のようなことができます。

CSSのtransitionやanimationプロパティでも、HTML要素のスタイルプロパティであればアニメーションさせることができますが、属性値（たとえばSVG要素のcxやcy、r など）は制御できません。

その点、GSAPを使えばSVG要素の属性値も含め、簡単にアニメーションさせることができます。

See the Pen GSAPを使ってSVG要素のプロパティをアニメーションさせている例 by E-VALUE WORKS (@evw) on CodePen.

GSAPのダウンロード方法

GSAPをプロジェクトに取り込むには以下の3つの方法があります。

公式サイトからファイルをダウンロードしてくる方法

以下のURLをクリックし、「Get GSAP」をクリックします。

https://gsap.com/docs/v3/Installation

そうすると、「gsap-public.zip」という名前のzipファイルがダウンロードされます。

中を開くと様々なフォルダが入っていますが、基本的には「gsap-public＞minified」の中に格納されている「gsap.min.js」ファイルをscriptタグで読み込めばOKです。

CDNを利用する方法

CDNを利用する場合は、以下のコードをheadタグの中に記述します。

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

npmを利用する方法

npmを使っている場合は、ターミナルでnpm install 1gsapを実行することで、node_modulesにファイルがインストールされます。

また、実際に使用する際は、次のようにimport文で読み込む必要があります。

import { gsap } from "gsap";

GSAPの基本メソッド「to」の使い方

まずはGSAPの基本メソッド「to」の使い方を解説します。

toメソッドは、今ある状態から指定した状態へアニメーションさせられるメソッドです。

1つ目のパラメーターに「アニメーションさせたい要素」、2つ目のパラメーターに「変化後のプロパティ値等をまとめたオブジェクト」を指定します。

gsap.to("ターゲット要素", "変化後のプロパティ値等をまとめたオブジェクト")

See the Pen GSAP toメソッドの使い方 by E-VALUE WORKS (@evw) on CodePen.

上の例では、「x: 300」と記載していますが、これはGSAPで使えるtransform: translateX(300px)と同等の指定です。

また、2つ目のパラメーターの中には変化後のプロパティ値だけでなく、アニメーション速度を決める「duration」と、イージングを決める「ease」も指定します。

gsap.to(".box", {
  x: 300, // GSAPで使えるtransform: translateX(300px)と同等の指定
  duration: 2, // アニメーションの時間（2秒間かけて要素を動かす）
  ease: "power2.out", // イージング
});

toメソッドでは、上述のように今ある状態から指定した状態へアニメーションさせるため、あらかじめCSSや、後述するsetメソッドを使って「アニメーション前（before）」の状態を作っておく必要があります。

GSAPの基本メソッド「set」の使い方

setメソッドは、指定した要素（target）のプロパティを即座に設定できるメソッドです。

toメソッドを使ってアニメーションさせたい場合に、アニメーション前の状態を設定したい場合などに便利です。

See the Pen GSAP setメソッドの使い方 by E-VALUE WORKS (@evw) on CodePen.

上の例では、autoAlpha: 0をセットしていますが、これはopacity: 0とvisibility: hiddenをセットで制御できるGSAPの特別なプロパティです。

gsap.set(".box", {
  autoAlpha :0, // opacity: 0 + visibility: hidden
});

GSAPの基本メソッド「from」の使い方

fromメソッドは、指定した状態から今ある状態へアニメーションさせられるメソッドです。

toメソッドとは逆の動きをするメソッドで、例えば一度非表示にしていた要素を再度表示させたいといった場合などは、setとtoメソッドを組み合わせなくても、このメソッドだけで実現できます。

See the Pen GSAP fromメソッドの使い方 by E-VALUE WORKS (@evw) on CodePen.

toメソッドとfromメソッドの使い分けシーンは人によって様々かと思いますが、すでに表示されているものを動かしたい・変化させたい場合には「to」、要素を出現させたい場合は「from」を使うのがおすすめです。

GSAPの基本メソッド「fromTo」の使い方

fromToメソッドは、指定した状態から指定した状態へアニメーションさせられるメソッドです。

fromToメソッドは、「アニメーションさせたい要素」・「変化前の状態」・「変化後の状態」の3つを引数として指定します。

gsap.fromTo("ターゲット要素", "変化前のプロパティ値等をまとめたオブジェクト","変化後のプロパティ値等をまとめたオブジェクト")

なお、「duration」や「ease」などのプロパティは3つ目のパラメーター（変化後のオブジェクト）の中に記載します。

See the Pen GSAP fromToメソッドの使い方 by E-VALUE WORKS (@evw) on CodePen.

まとめ

今回は、GSAPのインストール方法やよく使う基本的なメソッドであるto、set、from、fromToメソッドの使い方を解説しました。

toメソッドやfromメソッドは返り値を返し、それを利用することで、再生・停止・逆再生などの制御も可能になりますが、まずは基本的な使い方を抑えておくことをおすすめします。

今回は以上になります。最後までご覧頂き、ありがとうございました。