0

How can I calculate offsetX and offsetY of the mouse cursor, relative to an element being transformed, even though the mouse is not moving?

https://jsfiddle.net/kevin_dorion/usrLd1x3/34/

// this is the value I need to update, even when the mouse is not moving
offsetEl.innerHTML = `x: ${evt.offsetX} y: ${evt.offsetY}`;

As you can see, on mousemove, I get the offsetX and offsetY values, which are exactly what I need. But I also need to be aware of these values changing when the mouse is not moving.

requestAnimationFrame(animate);
// how do I manually calculate offsetX and offsetY of the mouse cursor relative to the "el" element when the mouse is not moving?

I was thinking of keeping the last mouse event, use the pageX/pageY to position an element, then calculate its offset, but I can't get it working properly.

Thank you!

EDIT: I was thinking of storing the last known matrix / mouse coordinates combinaison, use the current matrix and make some interpolation, but I can't get it right either...

kevind
  • 46
  • 4
  • This CSS event is in experimental mode but may be worth a look, https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent – dale landry Apr 23 '21 at 22:36
  • This may also be worth a look when using infinte animations: https://www.sitepoint.com/css3-animation-javascript-event-handlers/ – dale landry Apr 23 '21 at 22:40
  • My example uses a css animation for simplicity but in my real use case, it's a transformation applied to an element at a random interval. – kevind Apr 23 '21 at 22:43
  • https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionstart_event – dale landry Apr 23 '21 at 22:47
  • The problem is not the when, I have a trigger for the when. The problem is how to calculate relative offset when mouse is not moving. – kevind Apr 23 '21 at 22:52

0 Answers0