【GSAP入門】GSAPをサクッと使いたい方向けのためのまとめ

2023年8月24日
2023年8月24日

そもそもGSAPとは？

GSAP（GreenSock Animation Platform）は、JSのWebアニメーションライブラリです。複雑なアニメーションも簡単に実装ができ、その使いやすさとパフォーマンスの高さからかなり使われています。

GSAPの特徴について

高速
複雑なアニメーションがつくれる
簡単に書ける

とにかく、速い！簡単！使いやすい！

jQueryに依存しないので、あらゆる環境で使えます。

GSAPを使ってみよう

とりあえず実際の例文と使い方を見ていきます。手元で実際に動かしたほうがつかみやすいと思うので、プロジェクトフォルダを適当に準備してください。

GSAPのインストール方法

CDNとnpmからインストールする2つの方法があります

CDN

下記コードをタグ内かbody直下に貼り付けてください。

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

npｍ

下記コマンドをプロジェクトのルートディレクトリで実行します。

npm install gsap

JSファイル内でimportします。

import gsap from 'gsap';

※npmで使用する場合はwebpackなどのトランパイルツールが必要なのでご注意を。そのままだと動きません。

**今回のチュートリアルではCDNを使います。**プロジェクトフォルダを適当に準備して内にコードを貼り付けといてください！

GSAPの基本的な使い方

まずはGSAPの基本的な書き方から見ていきます。とりあえず例文と実際にどう動くのかを見ましょう。

const elemnt = document.querySelector('.element');

gsap.to(element, {
  opacity: 1,
  duration: 1,
});

要素をフェードインさせるアニメーションの例。

基本的な書き方は以下のとおりです。

gsap.to(target, { options });

gsap.to：　メソッド
target: 指定する要素
options: アニメーションの設定値

第一引数に要素、第二引数にアニメーションを指定する設定値を記述します。

GSAPのメソッドについて

さてさて、もうひとつ大事なこととして**"メソッド"**があります。

gsap.to()

さっきの例では、toでしたが多数のメソッドがあります。

gsap.to()	要素の終了地点をアニメーションで指定
gsap.from()	要素の開始地点をアニメーションで指定
gsap.set()	要素の初期状態を指定
gsap.fromTo()	要素の開始地点、終了地点をアニメーションで指定
gsap.timeline()	複数のアニメーションを連続的に実行するタイムライン。アニメーションの順序やタイミングを制御することができます。

と、色々とメソッドがあり、複雑なアニメーションも柔軟に指定できるのがgsapの魅力です。

GSAPの設定値

gsapでは指定できる設定値が多数あります。以下は代表的な設定値の例です。

`x`	要素の水平方向（左右）の移動量を指定します。
`y`	要素の垂直方向（上下）の移動量を指定します。
`opacity`	要素の透明度を指定します。
`scale`	要素の拡大縮小を指定します。
`rotation`	要素の回転角度を指定します。
`duration`	アニメーションの所要時間をミリ秒単位で指定します。
`ease`	アニメーションのイージング（変化の速さやスムーズさ）を指定します

GSAPの一般的なアニメーション例

なにはともあれ、実際の例を見たほうがつかみやすいので一般的なアニメーション例を挙げます。ご自身の環境で試してみてください。

例①：ふわっとフェードインアニメーション

// フェードインのアニメーション
  gsap.fromTo('.element', {
    y: 50,
    opacity: 0,
  },
  {
    y: 0,
    opacity: 1,
    duration: 1,
    delay: .8
  }
  );

例②：要素の移動

gsap.to('.element', { x: 200, duration: 1, ease: 'power2.out' });

例③：要素の回転・拡大

回転

gsap.to('.element',
        { rotation: 360
        });

拡大

例④：連続アニメーション

const tl = gsap.timeline({repeat: -1, repeatDelay: 1});
tl.to(".element",{
  x: 100,
  duration: 1
});
tl.to(".element", {
  y: 100,
  duration: 1,
});
tl.to(".element", {
  x: 0,
  duration: 1,
  rotation: 360
});
tl.to(".element", {
  y: 0,
  duration: 1,
});

この例では、timelineメソッドを使って連続的なアニメーションを実装しています。複雑なアニメーションを作る場合はtimelineを使うことが多いです。

まとめ

GSAPを使えば、アニメーションの実装もめちゃくちゃ簡単なので、サイト制作の場面でかなり生きると思います。あと制作会社でも頻繁に使用されているのでコーダーやフロントエンドエンジニアを目指す方は身につけておいたほうが良いと思います！

今回紹介した例は、マジでほんの一部です。今後もGSAPの記事を挙げていくのでチェックしてくれると嬉しいです。

というわけで今回は以上！