こんにちは!
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";
そして、一番最初に表示さておきたい色を設定しておくことで、1回りの背景アニメーションが終了し、次のアニメーションが始まるまでの間、背景色が真っ白にならないようにしています。
gsap.set(".js-bg_change",{
background:"#f4b5b5",
});
以上がデモとなりますー!
では本日はこのへんで〜👋