Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Converting mouse position to rotation angle

Recommended Posts

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 


Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.