codepens/the-cat-god/dist/script.js

const xmlns = "http://www.w3.org/2000/svg";
const xlinkns = "http://www.w3.org/1999/xlink";

const bubbleWrap = document.querySelector(".bubbleWrap");
const breathWrap = document.querySelector(".breathWrap");
const fePointLight = document.querySelector("#fePointLight");
// let fePointLight_Z = fePointLight.z.animVal;
// console.log(fePointLight.z)

const masterTl = new TimelineMax();

// const animatedObject = {
//   fePointLightZ: 12,
// }

const leftEyeTl = new TimelineMax({ paused: true });
const rightEyeTl = new TimelineMax({ paused: true });
leftEyeTl.to("#eyeSKin-l-open", 0.06, {
  morphSVG: "#eyeSKin-l-close" }).

to("#eyeSKin-l-open", 0.06, {
  morphSVG: "#eyeSKin-l-open" });

rightEyeTl.to("#eyeSKin-r-open", 0.06, {
  morphSVG: "#eyeSKin-r-close" }).

to("#eyeSKin-r-open", 0.06, {
  morphSVG: "#eyeSKin-r-open" });


const id = setInterval(blinkEye, 1000);
function blinkEye() {
  if (Math.random() > 0.7) {
    leftEyeTl.restart();
    rightEyeTl.restart();
  }
}


// sun
// const tl = new TimelineMax({onUpdate: render, repeat: -1});
// tl.to(animatedObject, 8, {
//   fePointLightZ: 5,
//   ease: CustomEase.create("custom", "M0,0 C0,0 0.037,0.772 0.04,0.782 0.04,0.77 0.084,-0.027 0.085,-0.053 0.094,-0.039 0.108,0.408 0.148,0.466 0.174,0.422 0.238,0.067 0.24,0.076 0.24,0.071 0.254,0.194 0.255,0.191 0.255,0.196 0.264,0.503 0.265,0.522 0.27,0.515 0.29,0.343 0.31,0.316 0.325,0.265 0.362,0.194 0.365,0.185 0.367,0.195 0.379,0.925 0.388,0.964 0.414,0.912 0.528,0.094 0.545,0.066 0.568,0.142 0.598,0.456 0.598,0.546 0.599,0.593 0.605,0.753 0.606,0.754 0.606,0.753 0.685,0.316 0.686,0.312 0.688,0.323 0.746,0.899 0.75,0.912 0.75,0.903 0.786,0.738 0.79,0.702 0.804,0.644 0.868,0.444 0.89,0.408 0.906,0.5 0.986,0.998 0.995,1.018 0.995,1.018 1,1 1,1"),
// })
// .to(animatedObject, 8, {
//   fePointLightZ: 12,
//   ease: CustomEase.create("custom", "M0,0 C0,0 0.037,0.772 0.04,0.782 0.04,0.77 0.084,-0.027 0.085,-0.053 0.094,-0.039 0.108,0.408 0.148,0.466 0.174,0.422 0.238,0.067 0.24,0.076 0.24,0.071 0.254,0.194 0.255,0.191 0.255,0.196 0.264,0.503 0.265,0.522 0.27,0.515 0.29,0.343 0.31,0.316 0.325,0.265 0.362,0.194 0.365,0.185 0.367,0.195 0.379,0.925 0.388,0.964 0.414,0.912 0.528,0.094 0.545,0.066 0.568,0.142 0.598,0.456 0.598,0.546 0.599,0.593 0.605,0.753 0.606,0.754 0.606,0.753 0.685,0.316 0.686,0.312 0.688,0.323 0.746,0.899 0.75,0.912 0.75,0.903 0.786,0.738 0.79,0.702 0.804,0.644 0.868,0.444 0.89,0.408 0.906,0.5 0.986,0.998 0.995,1.018 0.995,1.018 1,1 1,1"),
// })
// function render(){
//   fePointLight.z.baseVal = animatedObject.fePointLightZ;
// }

// bubble around eyes
let bubbleCount = 40;
const bubble = {
  bubbleL1: null,
  bubbleL2: null,
  bubbleL3: null,
  bubbleR1: null,
  bubbleR2: null,
  bubbleR3: null };

const bubbleTl = {
  bubbleL1_Tl: null,
  bubbleL2_Tl: null,
  bubbleL3_Tl: null,
  bubbleR1_Tl: null,
  bubbleR2_Tl: null,
  bubbleR3_Tl: null };


while (bubbleCount-- > 0) {

  for (let bubbleName in bubble) {
    bubble[bubbleName] = document.createElementNS(xmlns, "use");
    bubble[bubbleName].setAttributeNS(xlinkns, "xlink:href", `#${bubbleName}`);
    bubbleWrap.appendChild(bubble[bubbleName]);
    TweenMax.set(bubble[bubbleName], {
      transformOrigin: "50% 50%" });

  }

  for (let bubbleTlName in bubbleTl) {
    bubbleTl[bubbleTlName] = new TimelineMax();
  }

  bubbleTl.bubbleL1_Tl.to(bubble.bubbleL1, 0.5, {
    physics2D: {
      velocity: randomBetween(10, 70),
      angle: randomBetween(-65, -75),
      gravity: 0 },

    scale: 0.4,
    repeat: -1 });


  bubbleTl.bubbleL2_Tl.to(bubble.bubbleL2, 0.5, {
    physics2D: {
      velocity: randomBetween(10, 70),
      angle: randomBetween(-52, -68),
      gravity: 0 },

    scale: 0.1,
    repeat: -1 });


  bubbleTl.bubbleL3_Tl.to(bubble.bubbleL3, 0.5, {
    physics2D: {
      velocity: randomBetween(10, 70),
      angle: randomBetween(-38, -50),
      gravity: 0 },

    scale: 0.2,
    repeat: -1 });


  bubbleTl.bubbleR1_Tl.to(bubble.bubbleR1, 0.5, {
    physics2D: {
      velocity: randomBetween(10, 70),
      angle: randomBetween(-105, -115),
      gravity: 0 },

    scale: 0.4,
    repeat: -1 });


  bubbleTl.bubbleR2_Tl.to(bubble.bubbleR2, 0.5, {
    physics2D: {
      velocity: randomBetween(10, 70),
      angle: randomBetween(-112, -128),
      gravity: 0 },

    scale: 0.1,
    repeat: -1 });


  bubbleTl.bubbleR3_Tl.to(bubble.bubbleR3, 0.5, {
    physics2D: {
      velocity: randomBetween(10, 70),
      angle: randomBetween(-130, -142),
      gravity: 0 },

    scale: 0.2,
    repeat: -1 });


  for (let bubbleTlName in bubbleTl) {
    masterTl.add(bubbleTl[bubbleTlName].timeScale(0.4), bubbleCount / 20);
  }

}

// breath under nose
let breathCount = 20;
const breath = {
  breathL: null,
  breathR: null };

while (breathCount-- > 0) {
  for (let breathName in breath) {
    breath[breathName] = document.createElementNS(xmlns, "use");
    breath[breathName].setAttributeNS(xlinkns, "xlink:href", `#${breathName}`);
    breathWrap.appendChild(breath[breathName]);
    TweenMax.set(breath[breathName], {
      transformOrigin: "50% 50%" });

  }
  // console.log(breath)

  const breathLTl = new TimelineMax();
  const breathRTl = new TimelineMax();
  // const bubbleL2_Tl = new TimelineMax();

  breathLTl.to(breath.breathL, 2, {
    physics2D: {
      velocity: randomBetween(10, 30),
      angle: randomBetween(60, 80),
      gravity: 0 },

    ease: Power2.easeIn,
    scale: 4,
    opacity: 0,
    repeat: -1
    // repeatDelay:1,
  });

  breathRTl.to(breath.breathR, 2, {
    physics2D: {
      velocity: randomBetween(10, 30),
      angle: randomBetween(100, 120),
      gravity: 0 },

    ease: Power2.easeIn,
    scale: 4,
    opacity: 0,
    repeat: -1
    // repeatDelay:1,
  });

  masterTl.add(breathLTl, breathCount / 100);
  masterTl.add(breathRTl, breathCount / 100);
}






// masterTl.seek(100);


function randomBetween(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}