title: Mousemove giving wrong coordinates
body: <p>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 <em>mousemove</em> event, or maybe I'm wrong. I have here my <a href="https://codepen.io/karmablackshaw/pen/zYxXmoQ?editors=1111" rel="nofollow noreferrer">codepen</a>.</p>
  
  <blockquote>
    <p>HTML</p>
  </blockquote>
  
  <pre><code>&lt;div class="game-content"&gt;
    &lt;div class="pond"&gt;
      &lt;div id="circle" class="circle"&gt;&lt;/div&gt;
      &lt;div id="pond__fishing-area" class="pond__fishing-area"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>JS</p>
  </blockquote>
  
  <pre><code>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 });
      });
    }
  })
  </code></pre>