Mousemove giving wrong coordinates

Question

Good day! I have a problem with my little project. What I wish to achieve is whenever I hover my mouse on my fishing area, an indicator will appear. However, tt seems to be giving wrong coordinates on mousemove event, or maybe I'm wrong. I have here my codepen.

HTML

<div class="game-content">
  <div class="pond">
    <div id="circle" class="circle"></div>
    <div id="pond__fishing-area" class="pond__fishing-area"></div>
  </div>
</div>

JS

new Vue({
  el: '#app',
  mounted() {
    let circle = document.getElementById("circle");
    let circleRect = circle.getBoundingClientRect();
    let wrapper = document.getElementById("pond__fishing-area");
    let wrapperRect = wrapper.getBoundingClientRect();

    function moveCircle(e) {
      gsap.to(circle, 0.3, {
        css: {
          left: e.clientX,
          top: e.clientY
        }
      });
    }
    wrapper.addEventListener("mouseover", function() {
      gsap.to(circle, 0.4, { scale: 1, autoAlpha: 1 });
      wrapper.addEventListener("mousemove", moveCircle);
    });

    wrapper.addEventListener("mouseout", function() {
      gsap.to(circle, 0.4, { scale: 0.1, autoAlpha: 0 });
    });
  }
})

Answer 1

the css properties of your pond which is position: relative gives you wrong coordinates, remove this.