HP制作・コーディングなどのお手伝いをいたします

GSAP備忘録（その1）

目次
  1. はじめに
  2. トゥイーンの基本
  3. アニメーションの制御
  4. タイムライン
  5. MotionPathPlugin
  6. TextPluginプラグイン

はじめに

アニメーションライブラリを使えば、ブラウザの互換性が担保され、複雑になるタイミングの計算が不要になり、嬉しいことばかりです
GSAPは、GSAP2からGSAP3に移行して、より使いやすくなりました😊

無料枠の利用でも超便利です
＊GSAPはMITライセンスではなく、複数のエンドユーザーに販売するプロジェクトでは有料のビジネスライセンスが必要です

ちなみに、GSAPの全てのプラグインをCodepenでは無料で試すことができます

GSAPドキュメント

GSAP learning

GSAPチートシート

インストール

最も簡単な方法は、次のようなスクリプトタグをページに追加して使用します

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>

個々のアニメーションを「トゥイーン」
トゥイーンを組み合わせたコンテナのイメージが「タイムライン」
＊アニメーションを順番に実行するときは、ほぼ「タイムライン」を使用

トゥイーンの基本

gsap.method（element, duration, {obj}）

to()
終わりの状態を指定します

  • 第一引数は、ターゲット
    ターゲットには、オブジェクト、オブジェクトの配列、またはセレクターをテキスト（”.myClass”）にすることができます
  • 第二引数は、「アニメーション化するプロパティと値のペアのオブジェクト」・「特別なプロパティ」

durationとdelayの初期値は0.5秒（単位は秒で設定）、単位の初期値はpx、 easeの初期値は「power1.out（終わり向けて緩やかに減速）」

gsap.to(".orange", 2, { x: 300});

DOM要素にプロパティがなくても、「CSSPlugin」と呼ばれるコアプラグイン（GSAPのコアに含まれているプラ​​グイン）により、インラインスタイルで適用されます

CSSPlugin

GSAPCSS
x: 100transform: translateX(100px)
y: 100transform: translateY(100px)
rotation: 360transform: rotate(360deg)
rotationX: 360transform: rotateX(360deg)
rotationY: 360transform: rotateY(360deg)
skewX: 45skewX(45deg)
skewY: 45skewY(45deg)
scale: 2scale(2, 2)
scaleX: 2scaleX(2)
scaleY: 2scaleY(2)
xPercent: -50transform: translateX(-50%)
＊要素の幅に対する割合
yPercent: -50transform: translateY(-50%)
autoAlpha0はopcity:0でvisiblity:hidden
  • プロパティはキャメルケースを使用「background-color」は「backgroundColor」にします
  • topやleftなどの位置プロパティをアニメーション化する場合、移動しようとしている要素のpositionはabsolute・relative・fixedです

CSSのプロパティではなく属性をアニメーションしたい時は「AttrPlugin」（コアプラグイン）が利用できます

<svg>
<rect id="rect" fill="red" x="0" y="0" width="100" height="100"></rect>
</svg>

gsap.to("#rect", 1, {attr:{x:300}});

from()
スタートの状態を指定します

gsap.from(".gray, 2, {x: 300});

fromTo()
開始値と終了値を定義できます

// 150 から 300
gsap.fromTo(".pink", 2, {x: 150}, { x: 300});

set()
durationがゼロのto()と同じ

gsap.set(".pink",  {x: 100});

トゥイーンのプロパティ

Special Properties

delay
アニメーションを開始する前の遅延
onComplete
アニメーションの終了時に呼び出されるコールバック
各コールバック関数には、オプションで任意の数のパラメーターを渡すことができます。複数のパラメーターが存在する可能性があるため、パラメーターは配列として渡す必要があります
＊パラメーターが1つしかない場合でも
onUpdate：アニメーションが更新/レンダリングされるたびに呼び出されるコールバック
onStart：アニメーションの開始時に呼び出されます
onRepeat：アニメーションが繰り返されるたびに呼び出されます
onReverseComplete：アニメーションが反転されたときに再び開始に達したときに呼び出されます
stagger
要素アニメーションの開始時間をずらします
例：stagger:0.1（それぞれの開始時間を0.1秒間ずらすことができる）
ease
アニメーションの進め方（加速曲線）
デフォルト：「power1.out」
Ease Visualizer
repeat
アニメーションが繰り返される回数
-1は無限
repeatDelay
繰り返し間の時間（秒単位）
yoyo
trueの場合、再生は繰り返しごとに順方向と逆方向に交互になります
yoyoEase：yoyoのeaseを設定できます

アニメーションの制御

//操作するインスタンスを変数として保存
const tween = gsap.to("#logo", {duration: 1, x: 100});

//一時停止
tween.pause();

//再開
tween.resume();

//最初から順方向に再生を開始します。
tween.restart();

//逆方向に再生
tween.reverse();

//0.5秒ジャンプ
tween.seek(0.5);

//進行状況の正確に1/4にジャンプ
tween.progress(0.25);

//倍速
tween.timeScale(2);

//強制終了
tween.kill();
const button = document.querySelector('.button')
const tween = gsap.to(button, {scale:1, repeat:10, yoyo:true, paused:true});
//マウスがのった時
button.addEventListener("mouseenter", function(){
tween.restart();
})
//マウスが離れたとき
button.addEventListener("mouseleave", function(){
tween.pause();
gsap.to(button, {scale:0.8});
})

備考
「set」 はアニメーションの一部ではありません。そのプロパティの値を即座に設定します。
初期状態がCSSで定義されている場合、setを使用する必要はありません（その値を上書きします）、再起動時に特定の状態にリセットするために使用することができます。

「fromTo」 は set を使用せずにも動作しますが、開始値が明示的に設定されていない場合、そのプロパティの現在の値からアニメーションが開始されます。

タイムライン

const tl = gsap.timeline({obj1})
tl.method(element, {obj2})

//obj1はタイムラインで共通のプロパティ
//obj2はトゥイーンのプロパティ

タイムラインのデフォルト値を設定
＊デフォルト値にするとfrom()やto()やfromTo()メソッドで上書きが可能です

const tl = gsap.timeline({
  defaults: {
    duration: 2,
    ease: 'bounce.out'
  })

timeline()

連続したアニメーションのために設定する個々のトゥイーンの「delay（遅延時間）」が不要になります

  • アニメーションのグループ全体を制御します
  • 前のアニメーションのタイミング調整が後のアニメーションに自動的に影響します
  • モジュール化する（複雑なアニメーションはパネルごとに分割して作成する）
  • アニメーションのグループに基づいてコールバックを起動する（アニメーションがすべて完了したら、myFunction()呼び出すなど）

2つのトゥイーンが連続して再生されます
メソッドチェーンは、コードを簡潔にできます

const tl = gsap.timeline();
tl.to(".orange", 1, { x: 200, scale: 0.2});
tl.to(".gray", 1, {x: 200, scale: 1.5});

//メソッドチェーンにする
tl.to(".orange", 1,{ x: 200, scale: 0.2})
　.to(".gray", 1, { x: 200, scale: 1.5});

positionパラメータ
positionパラメータが指定されていない場合はすべてのトゥイーンは連続して実行されます

  • 絶対値（数値）：タイムライン開始からの時間を秒単位で指定します
  • 正の相対値（ “+=X”）： タイムラインの終了からX秒後にトゥイーンを配置します
  • 負の相対値（ “-=X”）： オーバーラップ（タイムラインが終了するX秒前にトゥイーンを配置します）
  • ラベル（「文字列」）： トゥイーンを配置する場所を指定
  • 他のトゥイーンと比較
    “<“前のアニメーションの開始時刻を参照するために 使用します（”< 3″は前のアニメーションの開始から3秒後 ）
  • “>”前のアニメーションの終了時刻を参照するために使用します（”> -0.5″は前のアニメーションが終了する0.5秒前）
const timeline2 = gsap.timeline();
timeline2.to(".orange, 1,{x:200})
  .to(".orange", 1,{x:200, scale: 0.2}, "+=1")
  .addLabel("greyAndPink")
  .to(".gray", 1,{x: 200, scale: 1.5, y: 20}, "greyAndPink") 
  .to(".pink", 1,{x: 200, rotation: 360}, "greyAndPink<2");

「タイムラインのデフォルト（全てのトゥイーンで共通）」を設定できます
例：gsap.timeline({duration: 1})
＊デフォルト値は、個々のトゥイーンで上書きできます

keyframesを使用できます
Staggersは要素アニメーションの開始時間をずらします

const timeline = gsap.timeline();
timeline.to(".circle",{
keyframes:{
"25%":{y:-250},
"100%":{x:300, y:0, ease: "none"},
},
duration:2,
stagger:0.5
})

Staggersのドキュメント

HTML・CSSを見る

<style>
.c-wrap{
  width:300px;
  height:300px;
  margin:10px auto;
  overflow: hidden;
  position:relative;
  border: solid 1px #ddd;
}
.circle{
  width:50px;
  height:50px;
  background-color: aqua;
  border-radius:50%;
  position:absolute;
  bottom:0; 
  transform: translateX(-50px)
}
</style>
<div class="c-wrap">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>

タイムライン制御
paused()は、アニメーションが現在一時停止されているかどうかを示す、アニメーションの一時停止状態を取得または設定します（デフォルトではfalseなので、クリックイベント等で制御するときはgsap.timeline({paused: true})にして停止させたりします）
タイムラインとトゥイーンは、共通の制御方法のセットを共有します
タイムラインの再生ヘッドを一時停止すると、すべての子に自動的に影響します


add()メソッドを使用すると、タイムラインの任意の場所にトゥイーン、タイムライン、ラベル、コールバックを追加できます

手動で .add() を使用: アニメーションは自動的に順番に追加され、実行されます。
ループで .add() を使用: アニメーションはデフォルトで同時に追加されるため、ディレイやオフセットを指定して順番に実行する必要があります。

MotionPathPlugin

パスに沿ってオブジェクトをアニメーション化します

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/MotionPathPlugin.min.js"></script>
<script>
gsap.registerPlugin(MotionPathPlugin);
</script>

SVGの<path>要素

<div style="width:100%; border:solid 1px #ccc;">
<svg width="100%" height="100%" viewBox="-20 0 557 190" id="svg">
  <path id="path" fill="transparent" stroke="#222" d="M9,100c0,0,18.53-41.58,49.91-65.11c30-22.5,65.81-24.88,77.39-24.88c33.87,0,57.55,11.71,77.05,28.47c23.09,19.85,40.33,46.79,61.71,69.77c24.09,25.89,53.44,46.75,102.37,46.75c22.23,0,40.62-2.83,55.84-7.43c27.97-8.45,44.21-22.88,54.78-36.7c14.35-18.75,16.43-36.37,16.43-36.37"/>
  <rect id="rect" width="35" height="20" fill="green" />
</svg>
</div>
<script>
gsap.registerPlugin(MotionPathPlugin);
gsap.to("#rect", 5,{
  repeat: 2,
  repeatDelay: 3,
  ease: "power1.inOut",
  motionPath:{
   path: "#path",
   align: "#path",//pathのIDを持つ要素を選択、ターゲットが左上が揃う
   alignOrigin: [0.5, 0.5],  //ターゲットを中心に置きたい場合はalignOrigin: [0.5, 0.5]  
  }
});
</script>

SVG パス データの文字列

<div style="width:300px; height:200px; border:solid 1px #ccc;">
<div id="rect" style="width:30px; height:20px; background:red;"></div>
</div>
<script>
gsap.registerPlugin(MotionPathPlugin);
const path = "m47.787403 118.62205l0 0c0 -41.08651 46.266254 -74.3937 103.33859 -74.3937l0 0c57.07231 0 103.33858 33.30719 103.33858 74.3937l0 0c0 41.08651 -46.266266 74.3937 -103.33858 74.3937l0 0c-57.072334 0 -103.33859 -33.30719 -103.33859 -74.3937z"

gsap.to("#rect", 5,{
  motionPath: {
    path: path,
    autoRotate: true, //パスの方向に自動的に回転  
    align:"self" //最初にジャンプしないようにパスをトゥイーンのターゲットに移動
   }
})
</script>

「x,y 」座標を持つオブジェクトの配列
＊配列は「x」と「y」以外でもOK
例：motionPath: [{scale:0.5, rotation:10}, {scale:1, rotation:-10}, {scale:0.8, rotation:3}]

<div style="width:300px; height:200px; border:solid 1px #ccc;">
<div id="rect2" style="width:30px; height:20px; background:blue;"></div>
</div>
<script>
gsap.registerPlugin(MotionPathPlugin);
//motionPathにpath以外のオプションを追加しない場合
gsap.to("#rect2", 5,{
  motionPath: [{x:0, y:0},{x:150, y:180},{x:270, y:0}]
})
</script>

備考：Club GreenSockメンバー向けの別のMotionPathHelperツールを使用するとブラウザーで直接パスをインタラクティブに編集できる

TextPluginプラグイン

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/TextPlugin.min.js"></script>
<script>
gsap.registerPlugin(TextPlugin); 
</script>

テキストコンテンツを1文字ずつ（delimiter: " "を設定した場合は一度に1語ずつ）置き換えます

gsap.to("#element", {
    duration: 2,
    text: {
        value: "This is the new text",
        delimiter: " "
    },
    ease: "none"
});

newClassでテキストに適用するCSSクラスを追加し、新しいテキストを古いテキストと視覚的に区別する時に使います

gsap.to("#element", {
    duration: 5,
    text: {
        value: "NEW",
        newClass: "class2",
        oldClass: "class1"
    },
    ease: "power2"
});

OLD