Home
GSAP
【GSAP入門】使い方となにができるのか

【GSAP入門】使い方となにができるのか

公開日
2022.10.29
更新日
2022.12.18
【GSAP入門】使い方となにができるのか

どうも!かけちまるです!

近年注目されてきたアニメーションライブラリのGSAPについて解説です。
軽量かつ多機能でいてプラグインも豊富に用意されています。

スクロールに応じたアニメーション線形補完など複雑なアニメーションが簡単に実装できます。
さらに、WebGLCanvasアニメーションでも重宝します。

この記事では、

  • ・GSAPでこんなことができる
  • ・GSAP読み込み方
  • ・基本的な記述方法
  • ・コールバックについて
  • ・バラツキのあるアニメーションについて
  • ・アニメーションのテンプレート化
  • ・タイムラインについて

がわかります。

GSAPを使えばこんなことができる

見たほうが早いと思います。
ざっくりGSAPで表現できることをサンプルにしてみました。

GSAPの読み込み方

GSAPの導入は簡単です。
CDNかnpmを使う方法を紹介します。

CDNの場合

HTML
開く&閉じるコピー
<script src="https://unpkg.com/gsap@3.11.3/dist/gsap.min.js"></script>

npmの場合

コマンド
開く&閉じるコピー
npm i gsap
JavaScript
開く&閉じるコピー
import gsap from 'gsap';

基本的な記述方法

最低限の記述は次の通りです。

JavaScript
開く&閉じるコピー
// gsap.to('セレクタ', 時間, { どのようにアニメーションさせるか }); gsap.to('.box', 1, { y: 50, repeat: -1 });

トゥイーンメソッド(gsap.to)の第一引数にアニメーションさせたい要素をします。
第二引数には、アニメーション時間を指定します。
第三引数には、どのようにアニメーションさせたいかを指定します。

トゥイーンメソッドの種類

トゥイーンメソッド 説明
to 終点の状態を指定します。
例.)今の状態からx方向に30px移動
from 始点の状態を指定します。
例.)今の状態からx方向に30px移動
fromTo 始点と終点を指定します。
例.)xが30pxの状態からx方向に-30px移動
set 値を指定します
アニメーションはせずCSSでスタイルをあてるような感じです。
JavaScript
開く&閉じるコピー
// 今の状態 → x方向に50px gsap.to('.to', 1, { x: 50, repeat: -1 }); // x方向に50px → 元の状態 gsap.from('.from', 1, { x: 50, repeat: -1 }); // x方向に-50px → x方向に50px gsap.fromTo('.fromTo', 1, { x: -50 }, { x: 50, repeat: -1 } ); // x方向に50px gsap.set('.set', { x: 50 });

トゥイーンのオプション

プロパティー 説明 デフォルト値
duration アニメーション時間の指定 1.0
ease イージングの指定 ‘power2.inOut’
delay 遅延秒数の指定 0
repeat リピート回数を指定 0
repeatDelay リピート時の遅延時間の指定 0
yoyo リピート時に反復挙動にするか false
paused 一時停止した状態にするか false
overwrite アニメーションを上書きするか false

例えば、2秒かけてバウンドするようにscaleし、かつ、繰り返し反復させるには次のように記述します。

JavaScript
開く&閉じるコピー
gsap.to('.box', 2, { scale: 2, ease: 'Bounce.easeOut', repeat: -1, yoyo: true });

使用できるCSSプロパティ

GSAPでは基本的にどの CSSプロパティも指定できます。
ですが、-(ハイフン)で区切られているCSSプロパティはハイフンの代わりに頭文字を大文字に指定する必要があります。

GSAP CSS
x: 10 transform: translateX(10px)
y: 10 transform: translateY(10px)
rotate: 360 transform: rotate(360deg)
scale: 1.5 transform: scale(1.5, 1.5)
scaleX: 1.5 transform: scaleX(1.5)
scaleY: 1.5 transform: scaleY(1.5)
xPercent: -50 transform: translateX(-50%)
yPercent: -50 transform: translateY(-50%)

上記だけでなく他のプロパティもbackground-colorbackgroundColorのようにすることで指定できます。

JavaScript
開く&閉じるコピー
gsap.fromTo('.box', 2, { x: -100 }, { rotate: 360, x: 100, backgroundColor: '#f00', ease: 'Power4.easeOut', repeat: -1, } );

コールバックについて

トゥイーンが開始する前、終了後などのタイミングで処理を走らせたい時に使うと便利です。
指定できるコールバックは次の通りです。

コールバック 説明
onComplete アニメーションが完了したときに呼び出す関数
onCompleteParams onComplete関数に渡すためのパラメーターの配列
onRepeat アニメーションが新しい反復サイクル(repeat)に入るたびに呼び出す関数
onRepeatParams onRepeat関数に渡すためのパラメーターの配列
onReverseComplete アニメーションが逆方向から再び開始に達したときに呼び出す関数(repeatを除く)
onReverseCompleteParams onReverseComplete関数に渡すためのパラメーターの配列
onStart アニメーションの開始時に呼び出す関数
onStartParams onStart関数に渡すためのパラメーターの配列
onUpdate アニメーションが更新されるたびに呼び出す関数(再生ヘッドを移動する「ティック」ごとに)
onUpdateParams onUpdate関数に渡すためのパラメーターの配列
JavaScript
開く&閉じるコピー
gsap.to('.box', 3,{ backgroundColor: '#f00', ease: 'linear', onStart: () => { document.querySelector('.text').innerText = '【スタート】最初は白です!' }, onComplete: () => { document.querySelector('.text').innerText = '【ゴール】赤になりました!'; } });

バラツキのあるアニメーションについて

要素を順番にアニメーションさせたいときはStaggerを使うことで簡単に実現できます。
最初からだけでなく最後からや中央から順番にアンメーションできたりします。

JavaScript
開く&閉じるコピー
gsap.fromTo('.box', .5, { autoAlpha: 0 }, { autoAlpha: 1, repeat: -1, stagger: { each: .5, } });

Staggerのオプション

オプション 設定値 説明
amount [秒数] 0.1 アニメーション間隔の合計時間を指定する。
例.) amountが1でアニメーション要素が10個の場合、間隔は0.1です。
each [秒数] 0.1 間隔の時間を指定する。
from start,center,end,edges,random,または数値 アニメーションをどこから開始するか指定
grid [Array | “auto”] [0,10] または “auto” 要素がグリッドに視覚的に表示されている場合に使用できます。
axis “x”,”y” gridを使用しているときに使用可能。
アニメーション方向の軸を指定できる。
ease 公式サイト参照 イージングを指定する。

Staggerをもっと詳しく知りたい人は別記事で解説しています。

アニメーションのテンプレート化

Effectsでよく使うアニメーションをテンプレート化し、使いまわすことができます。
そうすることで、記述も少なくなり、時間やイージングなどの管理が楽になります。

Effectsを作成する

JavaScript
開く&閉じるコピー
gsap.registerEffect({ name: 'fadeIn', // アニメーションの名前 // 未指定の場合のデフォルト値を設定 defaults: { duration: 2, x: 30, repeat: -1, ease: 'Power4.Out' }, // アニメーションを設定 effect: (targets, config) => { return gsap.fromTo(targets, config.duration, { x: 0 }, { x: config.x, ease: config.ease, repeat: config.repeat } ); }, extendTimeline: true, // gsap.timeline()で使えるようにする });

Effectsを使用する

JavaScript
開く&閉じるコピー
// 最低限の記述 gsap.effects.fadeIn('.box1'); // デフォルト値を変更する gsap.effects.fadeIn('.box2', { duration: .5, x: 100 });

Effectsをもっと詳しく知りたい人は別記事で解説しています。

タイムラインについて

gsap.timeline()を使えば連続的なアニメーションを実装することができます。
例えば次のようなアニメーション。

基本的な記述

gsap.timeline()に対してトゥイーンをつなげるように記述します。

gsap.timeline()を変数に格納して使用することもできます。
変数に格納すると同じオプションを指定するときに使いまわせるので便利です。

JavaScript
開く&閉じるコピー
gsap.timeline() .fromTo('.box', .8, { autoAlpha: 0, y: 30 }, { autoAlpha: 1, y: 0 }) .to('.box', 1, { x: 30 }) .to('.box', .5, { y: 100, rotate: 360 });

オプションについて

タイムラインの開始を数秒遅らせたいとか繰り返したいとかの時に指定します。
よく使いそうなオプションは次の通りです。
他の指定方法も詳しく知りたい人は公式サイトを参考にしてください。

オプション 設定値 説明
delay 秒数 アニメーションの開始を遅らせる
paused ブーリアン trueに設定すると、アニメーション作成直後に一時停止
repeat 数値 アニメーションが繰り返される回数
-1で無限ループ
repeatDelay 数値 ループ間の待ち時間
yoyo ブーリアン trueに設定すると、アニメーション奇数回目は再生、偶数回目は逆再生する。
JavaScript
開く&閉じるコピー
// 開始を遅らせる gsap.timeline({ delay: 3 }) .fromTo('.box.delay', .8, { autoAlpha: 0, y: 30 }, { autoAlpha: 1, y: 0 }) .to('.box.delay', 1, { x: 50 }) .to('.box.delay', .5, { y: 50, rotate: 360 }); // 繰り返す gsap.timeline({ repeat: 3 }) .fromTo('.box.repeat', .8, { autoAlpha: 0, y: 30 }, { autoAlpha: 1, y: 0 }) .to('.box.repeat', 1, { x: 50 }) .to('.box.repeat', .5, { y: 50, rotate: 360 }); // 反復させる gsap.timeline({ yoyo: true, repeat: 4 }) .fromTo('.box.yoyo', .8, { autoAlpha: 0, y: 30 }, { autoAlpha: 1, y: 0 }) .to('.box.yoyo', 1, { x: 50 }) .to('.box.yoyo', .5, { y: 50, rotate: 360 });

発火タイミングの制御

アニメーションの発火タイミングを調整することでより完成度の高いアニメーションを実装することができます。
他にも%で指定できたり、ラベルというものを使って指定できます。
使用することが多いのは次の指定方法かと思います。

設定値 説明
1 タイムラインの先頭からの時間
+=1 直前のトゥイーンの終了後からの時間
-=1 直前のトゥイーンの終了にオーバーラップする時間
< 直前のトゥイーンの開始時
<1 直前のトゥイーンの開始時からの時間
> 直前のトゥイーンの終了時
>1 直前のトゥイーンの終了後からの時間

他の指定方法も詳しく知りたい人は公式サイトを参考にしてください。

JavaScript
開く&閉じるコピー
gsap.timeline() .fromTo('.box', .8, { autoAlpha: 0, y: 30 }, { autoAlpha: 1, y: 0 }) .to('.box', 1, { x: 50 }, '+=2') .to('.box', .5, { y: 50, rotate: 360 }, '-=1');

timelineをもっと詳しく知りたい人は別記事で解説しています。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

画像の読み込み進度を%表示するオープニングアニメーション

画像の読み込み進度を%表示するオープニングアニメーション

GLSLの修飾子varyingの使い方【Three.js】

GLSLの修飾子varyingの使い方【Three.js】

translateを使わずにpositionで要素を中央寄せにする方法

translateを使わずにpositionで要素を中央寄せにする方法

jQueryでURLやパラメータを取得する方法【location】

jQueryでURLやパラメータを取得する方法【location】

Local by Flywheelで本番環境のWordPressをローカルに複製する

Local by Flywheelで本番環境のWordPressをローカルに複製する

【総まとめ】WebサイトにYouTube動画を埋め込む方法

【総まとめ】WebサイトにYouTube動画を埋め込む方法