// svg variables
const viewportWidth = 500;
const viewportHeight = 500;
const viewBoxWidth = 500;
const viewBoxHeight = 500;
const w = viewBoxWidth;
const h = viewBoxHeight;

const red = document.querySelector("#red");
const green = document.querySelector("#green");
const blue = document.querySelector("#blue");

// uncomment the animation that you'd like to see. The animations overwrite one another, so make sure to have only one running at a time.
initSVG();
//to();
//to_Array()
//to_ID();
//to_Class();
//from_Class();
//fromTo_Class();
//to_Class_Stagger();
to_Class_Stagger_Object();

function initSVG() {
  const svg = document.querySelector("svg");
  svg.setAttribute("width", `${viewportWidth}`);
  svg.setAttribute("height", `${viewportHeight}`);
  svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
}

function to() {
  gsap.to(red, {
    attr: {
      cx: 470,
    },
    duration: 2,
    repeat: -1
  });

  gsap.to(green, {
    attr: {
      cx: 470
    },
    duration: 2,
    repeat: -1
  });

  gsap.to(blue, {
    attr: {
      cx: 470
    },
    duration: 2,
    repeat: -1
  });
}

function to_Array() {
  gsap.to([red, green, blue], {
    attr: {
      cx: 470,
      r:100,
      fill:"purple",
    },
    duration: 2,
    repeat: -1
  });
}

function to_ID() {
  gsap.to("#red", {
    attr: {
      cx: 470
    },
    duration: 2,
    repeat: -1
  });

  gsap.to("#green", {
    attr: {
      cx: 470
    },
    duration: 2,
    repeat: -1
  });

  gsap.to("#blue", {
    attr: {
      cx: 470
    },
    duration: 2,
    repeat: -1
  });
}

function to_Class() {
  gsap.to(".ball", {
    attr: {
      cx: 470
    },
    duration: 2,
    repeat: -1
  });
}

function from_Class() {
  gsap.from(".ball", {
    attr: {
      cx: 470
    },
    duration: 2,
    repeat: -1
  });
}

function fromTo_Class() {
  //gsap.fromTo()
 gsap.fromTo(
  [red, green, blue],
  // from state
  {
    attr: {
      cx: 250,
      cy: 50,
      fill: "red",
    },
  },
  // to state
  {
    attr: {
      cx: 250,
      cy: 450,
      fill: "blue",
    },
    duration: 2,
    stagger: {
      each: 0.5,
      repeat: -1,
      yoyo: true,
    },

    ease: "back.inOut",

}
);
}

function to_Class_Stagger() {
  gsap.to(".ball", {
    attr: {
      cx: 470
    },
    duration: 2,
    stagger: 0.5,
    repeat: -1,
    yoyo: true
  });
}

function to_Class_Stagger_Object() {
  gsap.to(".ball", {
    attr: {
      cx: 470
    },
    duration: 2,
    stagger: {
      each: 0.5,
      repeat: -1,
      yoyo: true
    }
  });
}