
どうも!かけちまるです!
近年注目されてきたアニメーションライブラリのGSAPについて解説です。
軽量かつ多機能でいてプラグインも豊富に用意されています。
スクロールに応じたアニメーションや線形補完など複雑なアニメーションが簡単に実装できます。
さらに、WebGLやCanvasアニメーションでも重宝します。
この記事では、
がわかります。
見たほうが早いと思います。
ざっくりGSAPで表現できることをサンプルにしてみました。
GSAPの導入は簡単です。
CDNかnpmを使う方法を紹介します。
HTML<script src="https://unpkg.com/gsap@3.11.3/dist/gsap.min.js"></script>
コマンドnpm i gsap
JavaScriptimport 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
し、かつ、繰り返し反復させるには次のように記述します。
JavaScriptgsap.to('.box', 2, { scale: 2, ease: 'Bounce.easeOut', repeat: -1, yoyo: true });
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-color
→backgroundColor
のようにすることで指定できます。
JavaScriptgsap.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関数に渡すためのパラメーターの配列 |
JavaScriptgsap.to('.box', 3,{ backgroundColor: '#f00', ease: 'linear', onStart: () => { document.querySelector('.text').innerText = '【スタート】最初は白です!' }, onComplete: () => { document.querySelector('.text').innerText = '【ゴール】赤になりました!'; } });
要素を順番にアニメーションさせたいときはStagger
を使うことで簡単に実現できます。
最初からだけでなく最後からや中央から順番にアンメーションできたりします。
JavaScriptgsap.fromTo('.box', .5, { autoAlpha: 0 }, { autoAlpha: 1, repeat: -1, stagger: { each: .5, } });
オプション | 設定値 | 説明 |
---|---|---|
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
でよく使うアニメーションをテンプレート化し、使いまわすことができます。
そうすることで、記述も少なくなり、時間やイージングなどの管理が楽になります。
JavaScriptgsap.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()で使えるようにする });
JavaScript// 最低限の記述 gsap.effects.fadeIn('.box1'); // デフォルト値を変更する gsap.effects.fadeIn('.box2', { duration: .5, x: 100 });
Effects
をもっと詳しく知りたい人は別記事で解説しています。
gsap.timeline()
を使えば連続的なアニメーションを実装することができます。
例えば次のようなアニメーション。
gsap.timeline()
に対してトゥイーンをつなげるように記述します。
gsap.timeline()
を変数に格納して使用することもできます。
変数に格納すると同じオプションを指定するときに使いまわせるので便利です。
JavaScriptgsap.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 | 直前のトゥイーンの終了後からの時間 |
他の指定方法も詳しく知りたい人は公式サイトを参考にしてください。
JavaScriptgsap.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
をもっと詳しく知りたい人は別記事で解説しています。
おわり
フィードバックを送信
記事についてのフィードバックはTwitterかお問い合わせフォームから受け付けております。