お役立ちコラム
JavaScript

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

公開日： / 更新日：

※本記事には広告が含まれます。

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

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

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

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

GSAPの基礎を学びたい方はこちら

「GSAPを基礎から学びたい」という方は、以下の記事を順番に読んで頂くのがおすすめです。

  1. アニメーションライブラリ「GSAP」の基本！to、set、from、fromToメソッドの使い方
  2. 【GSAP】タイムラインの使い方！複数要素のアニメーション順を制御する方法
  3. 【GSAP】アニメーションをクリック・ホバーイベントと連動させる方法
  4. 【GSAP】ScrollTriggerプラグインの使い方！スクロールとアニメーションを連動させる方法
  5. matchMediaを使ってGSAPアニメーションをレスポンシブ対応させる方法

GSAPとは？

https://gsap.com/

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

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

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

GSAPでできること
  • DOM要素やSVG、オブジェクトのプロパティ値の補間アニメーション
  • 複数の要素のアニメーション順序の制御
  • スクロールに連動したアニメーション
  • メディアクエリに応じたアニメーションの切り替え

など

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つの方法があります。

  1. 公式サイトからファイルをダウンロードしてくる方法
  2. CDNを利用する方法
  3. npmを使う方法

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

以下の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)と同等の指定です。

background-colorなどのCSSプロパティは、GSAP内ではbackgroundColorのようにキャメルケースで指定することで指定できます。

See the Pen Untitled by E-VALUE WORKS (@evw) on CodePen.

また、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.

基本メソッドでよく使われるプロパティ一覧

基本メソッドでよく使われるプロパティは以下の通りです。

すべてを一度に覚える必要はありませんが、「こういう指定ができるんだな」と参考までにご覧ください。

基本プロパティ

durationアニメーションの実行時間（秒単位）を指定。
例：duration: 1.5
delayアニメーションを開始するまでの待機時間を指定。
例：delay: 0.5
easeイージング（加速・減速の動き方）を指定。
例：ease: “power2.out”
指定できる値はこちら：https://gsap.com/docs/v3/Eases/
repeatアニメーションの繰り返し回数を指定。（最初の1回の再生を除いた「追加の繰り返し回数」）
例：repeat: 2（-1を指定すると無限ループさせることも可能。）
yoyotrueにすると、アニメーションが終わったあとに逆方向へ戻るように再生させることが可能。
repeatと組み合わせることで、「行って戻る」動きを繰り返すことが可能。
paused trueにすることで初期状態では停止させておくことが可能。
その場合は、手動で.play()メソッドを呼び出して再生させる必要があり。
参考：【GSAP】アニメーションをクリック・ホバーイベントと連動させる方法
onStart再生開始時に呼ばれるコールバック関数を指定。
例：onStart: () => console.log(“アニメーションが開始されました。”)
onCompleteアニメーションが完了したときに実行されるコールバック関数を指定。
例：onComplete: () => console.log(“アニメーションが終了しました。”)
stagger複数のアニメーション対象要素を順番にずらして再生したいときに指定。
例：stagger: 0.2（0.2秒ずつ）
defaultsタイムラインで共通設定をまとめたいときに指定。
参考：【GSAP】タイムラインの使い方！複数要素のアニメーション順を制御する方法
■yoyoとrepeatを指定して「行って戻る」動きを実装した例

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

CSSのスタイル値を変更できるプロパティ

x / y / z要素をそれぞれの軸方向に移動させるプロパティ。
transform: translateX()、translateY()、translateZ()と同じ意味。
例：x: 100（横方向に100px移動）、x: “1rem”（横方向に1rem移動）
rotation / rotationX / rotationY要素をそれぞれの軸方向に回転させるプロパティ。
transform: rotate()、rotateX()、rotateY() と同じ意味。
例：rotation: 360
scale / scaleX / scaleY要素の拡大・縮小を行うプロパティです。
transform: scale()、scaleX()、scaleY() と同じ意味。
例：scale: 1
autoAlpha要素の透明度と表示状態を制御できるプロパティ。opacityと同じように値を0〜1の範囲で指定する。
autoAlphaでは透明度が0になったときに自動的にvisibility: hiddenが適用される。

まとめ

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

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

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

前の投稿へ
次の投稿へ

同じカテゴリーの記事を読む

HOMEお役立ちコラムJavaScriptアニメーションライブラリ「GSAP」の基本！to、set、from、fromToメソッドの使い方