Converting mouse position to rotation angle

[popland]

i have a gallery of images, hovering it i would like to scale to 1.1 (and that is simply done) but also skew it (using rotationX and rotationY) based on mouse position; at the moment im puzzled on how to convert the mouse position to the correct angle of rotation, i don't need the images to flip, just a subtle rotation that simulate the image being pulled by the mouse postion

 

i tried with something like this

let ry = (y / window.innerHeight / 2).toFixed(2);
let nx = (x / window.innerWidth / 2).toFixed(2);

 

this is what i got so far 

https://codesandbox.io/s/patient-platform-puq8q?file=/src/App.js

[ZachSaucier]

Hey popland. When creating something like this, you usually want to apply the mouse listeners on a container of the transformed element instead of the transformed element itself because that will make the mouse events less glitchy (i.e. if it rotates too much then the mouseleave will fire even though it's not outside of the original element's bounds). So in this case I'd probably make an empty element wrapper around each image.

 

It'd likely also be easier if you use the native mouse event's layerX and layerY properties. These are relative to the element instead of the viewport which make calculating the angle from the center of your element a lot simpler. 

 

Lastly I highly recommend using overwrite: 'auto' on your tweens so that they kill off conflicting tweens (that way you don't have unnecessary processing being done).

 

With those tips I think you can get it working the way that you want it to work. If you run into something you can't figure out feel free to ask.

[popland]

Thank you!

i was thinking about the container too, in my project im using gatsy img (i know we already discussed about "framework" specific topics) and probably the rendred image alread have a wrapper i can "intercept"

 

i will surely add the overwrite

thanks again