GSAPって何ができるの？導入方法や基本的な使い方解説

JavaScript

2023年12月15日

こんにちわ！コーダーの尾崎です！

おしゃれなサイトを見てみると複雑なアニメーションなどをよく目にしますよね。

アニメーションの実装って難しいイメージがありますがGSAPを使うと結構簡単に動きのあるサイトが作れますので今回はGSAPの導入方法や機能などを紹介したいと思います。

GSAPとは？

GSAP（GreenSock Animation Platform）とはウェブページやアプリケーションに高度なアニメーションを追加するための軽量で多機能なJavaScriptライブラリです。

特別な知識などは必要なく、JavaScriptだけで記述できるので、GSAPの記法さえ覚えてしまえば簡単にアニメーションを実装することができます。

GSAPの導入方法

GSAPを使用するには、まずライブラリをプロジェクトに組み込む必要があります。インストール方法は大きく３つあり下記になります。

CDNで読み込む
npmでインストール
公式サイトからダウンロードする

になります。

サクッと試したい方はCDNがおすすめです。

以下CDNとnpmによる導入方法です。

CDNによる導入

CDNによる導入は一番簡単で以下のコードを</body>直前に貼り付けるだけです。

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

このバージョンは古くなっている場合がありますので最新は公式サイトでご確認ください。

npmでインストール

Node.jsの開発環境で利用するには、npm installコマンドでパッケージをインストールします。

npm install gsap

jsファイルでインポートすることで使えます。

import { gsap } from "gsap";

基本的な書き方

上のデモのHTMLはこちら

<main>
   <div class="box"></div>
 </main>

Javascriptはこちら

gsap.to('.box', 1, {
  x: 300,
})

これだけで動いてしまいます。

解説していくと第一引数に動かす要素を指定しています。

第二引数にduration、アニメーション開始から終わるまでの時間を指定しています。

第三引数でオプションを指定しています。今回だとx軸方向に300px動かしています。

第二引数のdurationは無くても動きます。

gsap.メソッド("アニメーションさせる要素", {
  プロパティ: 設定値,
});

書き方としては上記のように覚えると良いと思います。

格メソッドの説明

各メソッドについては以下のようになります。

メソッド名	意味
to()	アニメーション終了の状態を指定
from()	アニメーション開始の状態を指定
fromTo()	アニメーションの開始から終了までを指定
set()	初期状態を指定（アニメーションなし）

デモを見てみましょう

コードはこのようになっています。

gsap.to(".box01", 2, {
  x: 200, 
});
gsap.from(".box02", 2, {
  x: 200, 
});
gsap.fromTo(".box03", 2, {
    x: 100, 
  },
  {
    x: 200, 
  }
);
gsap.set(".box04", {
  x: 200, 
});

toは元の位置から200px右に移動

fromは200px右から元の位置に移動

fromToは右に100pxの位置から200pxの位置まで移動

setはアニメーションはしません。200px右に配置と思ってもらったら良いです。

数値をマイナスにすると左にも移動できます。

アニメーションのサンプル

cssのようにtransitionの指定ができるので色々な動きをつけることができます。

scaleで拡大したりrotateで回転、opacityを0~1に設定しy軸を下から上に設定することでふわっと表示させることもできます。

repeatの値を-1とすることで繰り返しアニメーションさせることも可能です。

Timeline

gsap.timeline()を使うことで連続したアニメーションを実装することも可能です。

const tl = gsap.timeline({ repeat: -1 });

tl.to(".box", {
  x: 100, 
  rotate: 360, 
  duration: 1, 
})
  .to(".box", {
    y: 100, 
    scale: 1.5,
    duration: 1, 
  })
  .to(".box", {
    x: 0, 
    scale: 1,
    duration: 1, 
  })
  .to(".box", {
    opacity: 0, 
    scale: 0, 
    y: 0,
    duration: 1, 
  });

timelineを使わずに書いた場合１つ目のアニメーションが終わった秒数に２つ目のdurationを合わせて・・・などと複雑な計算が必要になりますが

timelineでは上から順番に実行されますので簡単にアニメーションをつなげることができます。

まとめ

いかがでしたでしょうか？

GSAPの導入から使い方の解説、色々な動きのサンプルなどをお見せしました。

今回は簡単な動きのみでしたがGSAPを極めると複雑なアニメーションを実装することも可能です。

公式ページのアニメーションもGSAPでできているので参考になると思います。

またGSAPのプラグイン、Scrolltriggerの記事も書いてるのでよかったら合わせて読んでみてください。

ではまた！

ブログ

BLOG