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

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

公開日
2022.10.01
更新日
2022.12.18
【GSAP】タイムラインを使えば複雑なアニメーションを実装できる

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

GSAPで複雑(連続的)なアニメーションを実装できるタイムラインについて解説します。

これまでsetTimeout()で作成している人が多かったと思いますが、タイムラインを使えばもっとシンプルでわかりやすく記述することができます。

この記事では、

  • ・基本的な記述
  • ・主に使用するメソッド
  • ・発火タイミングの管理
  • ・タイムラインのオプション
  • ・タイムラインのネスト

がわかります。

こんなアニメーションができます

例えば次のようなアニメーションができます。
わずか5行で実装できます。

JavaScript
開く&閉じるコピー
gsap.timeline() .fromTo('.hero', 1, { paddingTop: '0%' }, { paddingTop: '40%', ease: Power4.easeInOut }) .fromTo('.hero', 1.2, { width: '100%' }, { width: '80%', ease: Power4.easeInOut }) .fromTo('.bg', 1.2, { y: '-100%' }, { y: '0%', ease: Power2.easeInOut }, '-=1.2') .fromTo('.headline', 0.5, { autoAlpha: 0, x: 0 }, { autoAlpha: 1, x: 30 }, '-=0.5');

基本的な記述

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

gsap.timeline()を変数に格納して使用することもできます。

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

主に使用するメソッド

使用することが多いのは次のメソッドです。

関数名 説明
add() トゥイーン、タイムライン、コールバック、ラベルをタイムラインに追加します。
to() 終点の状態を指定します。
例.)今の状態からx方向に30px移動
from() 始点の状態を指定します。
例.)今の状態からx方向に30px移動
fromTo() 始点と終点を指定します。
例.)xが30pxの状態からx方向に-30px移動
set() 値を指定します。
アニメーションはせずCSSでスタイルをあてるような感じです。

発火タイミングの管理

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

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

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

JavaScript
開く&閉じるコピー
// 発火タイミング指定なし gsap.timeline() .fromTo('.off .box', .8, { autoAlpha: 0, y: 30 }, { autoAlpha: 1, y: 0 }) .to('.off .box', 1, { x: 50 }) .to('.off .box', .5, { y: 100, rotate: 360 }); // 発火タイミング指定あり gsap.timeline() .fromTo('.on .box', .8, { autoAlpha: 0, y: 30 }, { autoAlpha: 1, y: 0 }) .to('.on .box', 1, { x: 50 }, '+=3') .to('.on .box', .5, { y: 100, rotate: 360 }, '-=1');

タイムラインのオプション

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

オプション 設定値 説明
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: 100, 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: 100, 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: 100, rotate: 360 });

タイムラインのネスト

タイムラインは入れ子にすることができます。
タイムラインはコードが長くなり、可読性が悪くなりがちです。
入れ子を上手に使えば可読性の高いコードになるでしょう。

使わなくても実装できるので、慣れるまで使わなくても良いとも思います。

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 }) .add(nest('.box')); function nest(target){ const tl = gsap.timeline() .to(target, .8, { x: 0, rotate: 270 }) .to(target, .8, { y: 0 }); return tl; }

おわり

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

関連記事

セクションごとにスクロールできるjQueryプラグインのScrollify.jsを解説

セクションごとにスクロールできるjQueryプラグインのScrollify.jsを解説

react-scrollでページ内スクロールが効かない時と複数ページの対応

react-scrollでページ内スクロールが効かない時と複数ページの対応

【Google Maps API】Googleマップ埋め込みのピンを変更する

【Google Maps API】Googleマップ埋め込みのピンを変更する

【WordPress】PHPテンプレートでショートコードを使う方法

【WordPress】PHPテンプレートでショートコードを使う方法

SVGの背景色が変化するグラデーションのアニメーションを実装する方法

SVGの背景色が変化するグラデーションのアニメーションを実装する方法

【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする

【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする