こんにちは！
KNAP足立です！
さて今回は、タイトルの通りGSAPで自動で背景が徐々に変化するアニメーションを作成してみたので、
ブログ書いてみようって思いました！😊

デモはこちら〜

See the Pen AutoBgChange by knap_develp (@knap_develp) on CodePen.

やってること

設置しているコンテンツの背景をピンク→青→緑の順で展開し、
一回りだけで終了させたくないので、
gsapでリピートさせる処理を加えて

  var bgAnime = gsap.timeline({
    repeat: -1, 
  })

背景チェンジを繰り返しています。
ちなみに背景が変わる時間は5秒間に設定させて、

duration: 5,

背景チェンジが終了してから5秒間は色をキープさせてから次の背景色に変化させるようにしています。

var TopMoveTimer = "+=5";

そして、一番最初に表示さておきたい色を設定しておくことで、１回りの背景アニメーションが終了し、次のアニメーションが始まるまでの間、背景色が真っ白にならないようにしています。

  gsap.set(".js-bg_change",{
    background:"#f4b5b5",
  });

以上がデモとなりますー！
では本日はこのへんで〜👋