GSAPとは何か？基本的な使い方(読み方: ジーサップ)｜インストールから簡単なアニメーションの作成の実例（gsap.to, gsap.from, gsap.fromTo）

javascript-prograshi（プロぐらし）-kv JavaScript
2025/8/14
記事内に広告が含まれていることがあります。

GSAPとは何か？

GSAP (GreenSock Animation Platform)とは、ウェブサイトで動きのある表現（アニメーション）を簡単に実現するためのJavaScriptライブラリです。名称は「ジーサップ」と呼びます。

「ライブラリ」とは、特定の機能を持つプログラムをまとめたもので、１からコードを書かなくても、用意された機能を使って手軽にアニメーションを作ることができます。

https://gsap.com/

GSAPを使うメリット

GSAPの主なメリットは次の３つです。

  • 記述が簡単
    複雑なアニメーションも、直感的に理解しやすいシンプルなコードで書くことができます。
  • 互換性が高い
    主要なすべてのブラウザで動作します。ブラウザによる表示のずれを心配する必要がありません。
  • 超高機能
    他のアニメーションライブラリと比べても、スムーズで快適なアニメーションを作成することができます。


GSAPのデメリット

GASPは様々な機能が用意されていて、簡単なアニメーションから複雑なアニメーションまで様々なことできます。

その反面、できることや用意された機能が多すぎて学習コストが高いことが挙げられます。

全て学ぼうとすると、通常のWEBサイトでは必要のないようなことまで含んでしまうので、GASPの基本構文を覚えて、後はやりたいことから逆引きでGASPを利用していくのがおすすめです。


GASPの基本的な考え方

GSAPは、主に以下の3つの要素を使ってアニメーションを制御します。

  1. 対象（Target）
    どのアニメーションを動かしたいか（例：div、img、h1などのHTML要素）
  2. プロパティ（Properties）
    どのように動かしたいか（例：x軸に移動、opacityを変化させる、scaleを拡大する）
  3. 期間（Duration）
    どれくらいの時間をかけて動かしたいか（例：1秒間）


GSAPのインストール（CDN）

GSAPをインストールする方法はいくつかあります。

npmやyarnでライブラリ自体をインストール方法と、scriptタグでCDNを読み込む方法があります。

一番簡単なのはCDNを読み込む方法です。

HTMLに以下のコードを記述します。

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

※上記のバージョンは3.13.0です。最新版はGSAPの公式ページで確認できます。


GSAPのコアライブラリとプラグイン

GSAPを使うと本当に様々なことができます。CSSのアニメーションのように基本的な動きで動かすだけでなく、スクロール量に合わせて動かしたり、ドラッグ＆ドロップ機能を実装したり、SVGのパスに沿ってアニメーションさせることができます。

上記のCDNで利用できるのは、その中でも最も基本となる「Tween（ある値をある状態から別の状態に変化させるライブラリ）」と、「Timeline（複数のTweenを順番や重なりを制御するライブラリ）」です。

これがGSAPの基本となるため上記CDNをコアライブラリと呼びます。

スクロールやドラッグ＆ドロップなどの他の機能（プラグイン）を利用したい場合はコアライブラリに加えて、専用のプラグインをインストールする必要があります。

注意点

TweenとTimeline以外の他のライブラリを利用する場合は、コアライブラリの読み込みの後に他のプラグインのCDNを読み込む必要があります。

例えば、ScrollTriggerも使いたい場合は以下のように記述します。

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

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


GSAPに用意されているプラグイン

なお、GSAPには以下のようなプラグインが用意されています。（プラグイン＝GSAP標準では扱えない特殊なアニメーションを可能にする拡張機能）

GSAPに用意されている主なプラグイン
  1. ScrollTrigger
    スクロールに応じたアニメーション制御
  2. Draggable
    要素のドラッグ操作やドロップの制御
  3. MotionPathPlugin SVG
    要素をパスに沿って動かす
  4. SplitText
    文字や単語ごとに分解してアニメーション
  5. CSSRulePlugin
    CSS擬似要素（::before, ::after）のアニメーション化

なおプラグインは他にもたくさんあります。



この記事では基本となるコアライブラリのTweenの実例を紹介します。


Tweenとは何か？

Tween、”between”（～の間）から来ており、CSSプロパティ（x、y、opacity、scaleなど）を、ある開始状態から終了状態へとスムーズに変化させる役割を果たします。

Tweenでは次の３つのメソッドが用意されています。

Tweenの３つのメソッド
  1. gsap.to()
  2. gsap.from()
  3. gsap.fromTo()

以下でそれぞれについて実例を用いて解説します。


gsap.to()

gsap.toとは何か？

gsap.to()は、現在の状態から指定した終了状態へアニメーションさせる最も基本的なメソッドです。

基本構文は以下のようになっていて、「対象の要素を、指定した状態にする」という命令を記述します。

gsap.to(セレクタ, {
        プロパティ1: 値1,
        プロパティ2: 値2,
        ...        
});

動かしたい対象をセレクタで指定します。最終的にどういう状態にしたいかをプロパティで指定していきます。


実例

例えば、クラス名　gsap-box という赤い四角を4秒間で300px右に動かして、最終的に透明にするには以下のように記述します。

  gsap.to(".gsap-box", {
    x: 300,
    opacity: 0,
    duration: 4,
    repeat: -1
  });

repeat: -1 にすると無限ループになります。

<div class="gsap-box1"></div>

<style>
.gsap-box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

<script>
  gsap.to(".gsap-box1", {
    x: 300,
    opacity: 0,
    duration: 4,
    repeat: -1
  });
</script>






gsap.toのチートシート｜プロパティ一覧

gsap.toを使うときは以下のコードをコピーして、必要なプロパティだけ残していくことがお勧めです。

gsap.to(".selector", { // セレクターのテキスト、配列、またはオブジェクト
  x: 100, // 変化させたいプロパティ
  backgroundColor: "red", // k※キャメルケースを使用
  duration: 1, // アニメーションにかける時間（秒）
  delay: 0.5, // アニメーション開始までの遅延時間（秒）
  ease: "power2.inOut", // イージング（アニメーションの変化の仕方）
  stagger: 0.1, // 複数の要素をずらしてアニメーションさせる時間（秒）
  paused: true, // trueにするとアニメーションを一時停止した状態で開始する（デフォルトはfalse）
  overwrite: "auto", // アニメーションが競合した場合の挙動（デフォルトはfalse）
  repeat: 2, // 繰り返す回数（-1で無限ループ）
  repeatDelay: 1, // 繰り返しと繰り返しの間の遅延時間（秒）
  repeatRefresh: true, // 繰り返しのたびにアニメーションをリフレッシュする
  yoyo: true, // trueにするとアニメーションが往復する（A-B-B-Aのように）。falseだと最初から再生（A-B-A-Bのように）
  yoyoEase: true, // 往復時のイージング（"power2"などのように指定も可能）
  immediateRender: false, // trueにするとアニメーション開始前にプロパティの値をレンダリングする
  onComplete: () => { // アニメーション完了時に実行されるコールバック関数
    console.log("finished")
  },
  // 他のコールバック関数:
  // onStart, onUpdate, onRepeat, onReverseComplete
});


なお、変化させたいプロパティはx以外にもyやrotateなど様々なものが使えます。また、上記以外にも用意されているプロパティはあります。

＞（公式※英語）gasp.toで使えるプロパティ一覧


gsap.from()

gsap.fromとは何か？

gsap.from()は、指定した内容を開始状態として、デフォルトの状態へアニメーションさせるメソッドです。

基本構文はgasp.toと同じです。

gsap.from(セレクタ, {
        プロパティ1: 値1,
        プロパティ2: 値2,
        ...        
});

動かしたい対象をセレクタで指定します。初期にどういう状態にしたいかをプロパティで指定していきます。


実例

例えば、以下のコードだと、x,y座標が（300px, 200px）の位置で360度回転した状態からスタートし、4秒後にデフォルトの状態に戻る動きの無限ループです。

  gsap.from(".gsap-box2", {
    x: 300,
    y: 200,
    rotate: 360,
    opacity: 0,
    duration: 4,
    repeat: -1
  });


先ほどと同様にgsap-boxという赤い四角を動かしてみます。

<div class="gsap-box2"></div>

<style>
.gsap-box2 {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

<script>
  gsap.from(".gsap-box2", {
    x: 300,
    y: 200,
    rotate: 360,
    opacity: 0,
    duration: 4,
    repeat: -1
  });
</script>






gsap.fromTo()

gsap.fromToとは何か？

gsap.fromTo()は、指定した開始状態から指定した終了状態へアニメーションさせるメソッドです。開始状態と終了状態の両方を明示的に指定します。

基本構文はgasp.toとgrap.fromを組み合わせた形です。

gsap.fromTo(セレクタ, 
  //開始状態
  {
        プロパティ1: 値1,
        プロパティ2: 値2,
        ...        
  }
  //終了状態
  {
        プロパティa: 値a,
        プロパティb: 値b,
        ...        
  }
);


実例

例えば、以下のコードだと、初期状態が x=-100pxの位置から透明な状態で開始し、4秒後に（300px, 100px）の位置に向かって、大きさが1.6倍、360度回転しながら動く動きの無限ループになります。

  gsap.fromTo(".gsap-box",
    // 開始状態
    {
      x: -100,
      opacity: 0    
    },
    // 終了状態
    {
      x: 300,
      y: 100,
      scale: 1.6,
      rotate: 360,
      opacity: 1,
      duration: 4,
      repeat: -1,
    }
  );


先ほどと同様にgsap-boxという赤い四角を動かしてみます。

<div class="gsap-box3"></div>

<style>
.gsap-box3 {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

<script>
  gsap.fromTo(".gsap-box3",
    // 開始状態
    {
      x: -100,
      opacity: 0    
    },
    // 終了状態
    {
      x: 300,
      y: 100,
      scale: 1.6,
      rotate: 360,
      opacity: 1,
      duration: 4,
      repeat: -1,
    }
  );
</script>


まとめ

GSAPは要素を動かすうえで非常に強力なツールです。gsap.to、gsap.from、gsap.fromTo自体はシンプルなので、基本構造を覚えてしまえば比較的応用がやりやすいです。



タイトルとURLをコピーしました