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
// 今の状態 → 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 });

実装サンプル

トゥイーンのオプション

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

JavaScript
gsap.to('.box', 2, {
   scale: 2,
   ease: 'Bounce.easeOut',
   repeat: -1,
   yoyo: true
});

実装サンプル

使用できるCSSプロパティ

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

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

JavaScript
gsap.fromTo('.box', 2,
   { x: -100 },
   { rotate: 360, x: 100, backgroundColor: '#f00', ease: 'Power4.easeOut', repeat: -1, }
);

実装サンプル

Staggerのオプション

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 });

実装サンプル

基本的な記述

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 });

実装サンプル

オプションについて

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

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 });

実装サンプル

発火タイミングの制御

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

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

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をもっと詳しく知りたい人は別記事で解説しています。

【GSAP】タイムラインを使えば複雑なアニメーションを実装できる

GSAPで複雑（連続的）なアニメーションを実装できるタイムラインについて解説します。これまでsetTimeout()で作成している人が多かったと思いますが、タイムラインを使えばもっとシンプルでわかりやすく記述することができます。