Array.prototype.forEach.call(document.querySelectorAll('.media'), function(media) {
  
  const circle = document.querySelector("." + media.getAttribute('data-circle'));
  TweenMax.set(circle, { scale: 0, xPercent: -50, yPercent: -50 });

 media.addEventListener("pointerenter", function(e) {
    TweenMax.to(circle, 0.3, { scale: 1, opacity: 1 });
    positionCircle(e, media, circle);
  });

  media.addEventListener("pointerleave", function(e) {
    TweenMax.to(circle, 0.3, { scale: 0, opacity: 0 });
    positionCircle(e, media, circle);
  });

  media.addEventListener("pointermove", function(e) {
    positionCircle(e, media, circle);
  });

});

function positionCircle(e, media, circle) {
  var rect = media.getBoundingClientRect();
  var relX = e.pageX - rect.left;
  var relY = e.pageY  - rect.top - window.scrollY;
  TweenMax.to(circle, 0.15, { x: relX, y: relY });
}