・GSAPってどうやって使うの？
こんな疑問にお答えします。
「GSAP」とは手軽にアニメーションが実装できるJavaScriptライブラリのこと。
複雑なアニメーションも対応できます。
かつ簡単に実装可能。
すぐにできるよ！
ということで、この記事では「GSAPの使い方」について解説していきます！
・GSAPとは？
・GSAPの使い方【準備編】
・GSAPの使い方【実行編】
・GSAPの使い方【オプション】
目次
【解説】GSAPとは？
GSAPとはアニメーション実装に特化されたJavaScriptライブラリのこと。
手軽に実装可能で、複雑なアニメーションも作ることができます。
・軽量
・高速
・jQueryを使わない
・複雑なアニメーションが実装可能
GSAPには2つのライセンスがあります。
・Standard License（無料）
・Business License（有料）
基本的なWeb制作であれば無料を使えばOK。
【解説】GSAPの使い方【準備編】
「GSAP」を使うために、まずは下記の準備をしていきましょう。
①：GSAPを導入する
②：GSAPを読み込む
順に解説していきます。
まずは「GSAP」を導入しましょう。
Zipファイルやnpm等インストール方法はありますが、今回は「CDN」を使います。
下にスクロールするとCDNに切り替えるタブが出るのでクリック。
そこで出てくるタグをコピーしましょう。
続いてコピーしたタグを読み込むため、htmlファイルに貼り付けます。
（こちらのタグは2024年7月最新です）
<!-- GSAP用のタグ -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<!-- 自作JavaScriptのタグ -->
<script src="./script.js"></script>これで準備完了です！
「GSAPのタグ→自分のタグ」の順番で読み込もう。
【解説】GSAPの使い方【実行編】
続いてGSAPを実行していく使い方を紹介していきます。
まずデモがこちら↓
See the Pen GSAP 基本的な使い方① by jito-coder (@jito-coder) on CodePen.
右下の「Return」ボタンをクリック後、円形が右に動きますよね。
コードがこちら。
htmlとcssについては通常通りの書き方になります。
<div class="container">
<div class="js-circle"></div>
</div>.js-circle {
width: 100px;
height: 100px;
background-color: #000066;
border-radius: 100%;
}gsap.to(".js-circle", {
x: 150,
duration: 2,
});GSAPを使う重要な点が、JavaScriptのコードです。
内容はこちら↓
gsap.メソッド("要素", {
プロパティ: 値,
プロパティ: 値,
});これだけで実装可能です。
「要素」というのは今回でいう.js-circleですね。
「gsap.メソッド」にて、どの状態のアニメーション処理を書くか指定できます。
そのメソッドがこちら↓
| to() | アニメーション終了状態の処理 |
| from() | アニメーション開始状態の処理 |
| fromTo() | アニメーション開始〜終了状態の処理 |
| set() | 初期状態 |
gsap.to("要素", {
// 終了状態の処理
});gsap.from("要素", {
// 開始状態の処理
});gsap.fromTo("要素", {
// 開始の処理
}, {
// 終了の処理
});gsap.set("要素", {
// 初期状態
});そんなサンプルがこちら↓
See the Pen GSAP 基本的な使い方② by jito-coder (@jito-coder) on CodePen.
（右下のReturnをクリック後、動作確認できます）
gsap.to(".js-circle", {
x: 150,
duration: 2,
});
gsap.from(".js-circle02", {
x: 150,
duration: 2,
});
gsap.fromTo(".js-circle03", {
x: 300,
}, {
x: 150,
duration: 2,
});
gsap.set(".js-circle04", {
x: 150,
duration: 2,
});中に記述するプロパティと値にて、アニメーション処理のオプションを設定できます。
それが主にこちら↓
| プロパティ名 | 処理内容 | 初期値 |
|---|---|---|
| ease | アニメーション変化の内容 | power1.out |
| yoyo | リピート時の方向を 順・逆交互にするか否か | false |
| delay | アニメーション開始までの遅延時間 | 0 |
| duration | アニメーション開始〜終了までの時間 | 0.5 |
| repeat | アニメーションのリピート回数 | 0 （-1を指定で無限） |
| repeatDelay | アニメーションのリピートまでの遅延時間 | 0 |
| paused | アニメーションを一時停止するか否か | false |
| stagger | 複数アニメーションの開始時間を変更 | 0 |
| overwrite | アニメーションを上書きするか田舎 | false |
試しに指定してみるとこんな感じですね↓
gsap.メソッド("要素", {
ease: "power1.out",
yoyo: false,
delay: 0,
duration: 0.5,
repeat: 0,
repeatDelay: 0,
paused: false,
stagger: 0,
overwrite: false
});また色や角度等のCSSぽい処理に使えるオプションがこちら↓
| プロパティ名 | 処理内容 | 初期値 |
|---|---|---|
| ｘ | X軸方向に動かす | 0 |
| y | Y軸方向に動かす | 0 |
| scale （X,Yの指定も可能） | 要素の大きさを変える | 1 |
| rotate | 要素の角度を変える | 0 |
| skewX,skewY | 要素の傾斜を変える | 1 |
| transformOrigin | 要素の中心を変える | 50% 50% |
| opacity | 要素の透過を変える | 1 |
| backgroundColor | 要素の色を変える | |
| borderRadius | 要素の角丸を変える |
試しに指定してみるとこんな感じですね↓
gsap.メソッド("要素", {
x: 50,
y: 50,
scale: 1.5,
scaleX: 1.5,
scaleY: 1.5,
rotate: 45,
skewX: 50,
skewY: 50,
transformOrigin: "top left",
opacity: 0.5,
backgroundColor: "#000066",
borderRadius: "10", //％の指定も可能
});以上がGSAPの基本的な使い方になります！
＼今話題のGSAPがたったの10日間で学べる／
アニメーション実装に強くなり、単価を上げたい方。スニペット集を使い、爆速でコーディングしたい方。
競合が増える前の今のうちにチェック↓
【解説】GSAPの基本的な使い方【アニメーションサンプル付き】
・GSAPはアニメーションに特化したJSライブラリ
・無料と有料の2つのライセンスがある
・メソッドとプロパティと値にて処理を書く
「GSAP」は便利なので使い方を覚えておこう！
