console.clear();

var target1 = document.querySelector("#target1");
var target2 = document.querySelector("#target2");
var star1 = document.querySelector("#star1");
var star2 = document.querySelector("#star2");

// Make your life easier
TweenLite.set([target1, target2, star1, star2], {
  transformOrigin: "center"
});

TweenLite.set(target1, {
  x: 100,
  y: -25,
  rotation: 45,
  scale: 2
});

TweenLite.set(target2, {
  x: 50,
  y: -50,
  rotation: -130,
  scale: 2.5
});

animateStar(star1, target1);
animateStar(star2, target2);

function animateStar(star, target) {
   
  var box1 = getBBox(star);
  var box2 = getBBox(target);
  
  // cx and cy are centerX and centerY
  var x = box2.cx - box1.cx;
  var y = box2.cy - box1.cy;
    
  // GSAP object on element to get transform values
  var transform = target._gsTransform;
  
  return TweenMax.to(star, 3, {
    x: x,
    y: y,
    scaleX: transform.scaleX,
    scaleY: transform.scaleY,
    rotation: transform.rotation + "_short",
    ease: Power1.easeInOut,
    repeat: -1,
    repeatDelay: 0.5,
    yoyo: true
  });  
}

// Posted here
// https://greensock.com/forums/topic/13681-svg-gotchas/?page=2&tab=comments#comment-72060

/**
 * @param {SVGElement} element - Element to get the bounding box for
 * @param {boolean} [withoutTransforms=false] - If true, transforms will not be calculated
 * @param {SVGElement} [toElement] - Element to calculate bounding box relative to
 * @returns {SVGRect} Coordinates and dimensions of the real bounding box
 */
function getBBox(element, withoutTransforms, toElement) {
  
  var svg = element.ownerSVGElement;
  
  if (!svg) {
    return { x: 0, y: 0, cx: 0, cy: 0, width: 0, height: 0 };
  }
  
  var r = element.getBBox(); 
  
  if (withoutTransforms) {
    return {
      x: r.x,
      y: r.y,
      width: r.width,
      height: r.height,        
      cx: r.x + r.width / 2,
      cy: r.y + r.height / 2
    };
  }
  
  var p = svg.createSVGPoint(); 
      
  var matrix = (toElement || svg).getScreenCTM().inverse().multiply(element.getScreenCTM()); 

  p.x = r.x;
  p.y = r.y;
  var a = p.matrixTransform(matrix);

  p.x = r.x + r.width;
  p.y = r.y;
  var b = p.matrixTransform(matrix);

  p.x = r.x + r.width;
  p.y = r.y + r.height;
  var c = p.matrixTransform(matrix);

  p.x = r.x;
  p.y = r.y + r.height;
  var d = p.matrixTransform(matrix);

  var minX = Math.min(a.x, b.x, c.x, d.x);
  var maxX = Math.max(a.x, b.x, c.x, d.x);
  var minY = Math.min(a.y, b.y, c.y, d.y);
  var maxY = Math.max(a.y, b.y, c.y, d.y);
    
  var width = maxX - minX;
  var height = maxY - minY;
  
  return {
    x: minX,
    y: minY,
    width: width,
    height: height,        
    cx: minX + width / 2,
    cy: minY + height / 2
  };
}