【JavaScript・GSAP🔰】アニメーションちゃんと動いている？検証するプログラムの使い分け

サイトをかっこよく動かしたい！と言った時にGSAPを使って動かしているがうまくいかない時の検証デバッグで、アニメーション途中とアニメーション後の時の使い分けが勉強になったのでここに残す。

プログラム途中のコード

    onStart: () => {
      console.log("処理：開始");
    },

    onComplete: () => {
      console.log("処理：終了");
    },

onStartはプログラム開始時に、onCompleteはプログラム終了時にそれぞれセットする。
動いているかどうかを、Googleの検証ツールで確認できる。

今回、画像の表示をさせる順番でうまくいかないところがあり、それで検証した。

tl.call()

※tlはgsap.timelineの設定

tl.call(() => {
  const kv1 = document.querySelector(".js-flip--kv1");

  console.log("画像1");
});

こちらも合わせて確認するとよい