This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Berend Holtland
Posted Aug 13 - Read on Facebook

I'm making a module for Framer that does basically this: http://fian.my.id/Waves/#examples

There's only one thing i can't figure out. I can't seem to track the position of the mouse within the layer properly. I tried event.mouseX and Y but it gives back the position of the mouse within the entire frame. Any idea how to solve this?

10 Comments

Daniel Lin

What values do you ideally want returned?

Berend Holtland

The layer i want it to work in is width: 496, height:848. Ideally i would want it to return something between x: 0 - 496, y: 0 - 848 when i click the layer.

Daniel Lin

Could you do something like:
newX = event.mouseX - layer.X
newY = event.mouseY - layer.Y
?

Berend Holtland

mm that doesn't seem to work either. if in some way i could get the height and width of the Framer background, i could calculate it with the height and width of the layer. Any idea if i could get that somehow?

Keith Lang

I'm struggling with this one too. Although I can get the Viewers dimension, and the device dimension, I don't believe there's a way to get the dimension and position of the current stimulated device screen?

Berend Holtland

Okay i seemed to have figured something out. Though this only works when zoom = 100%. I created the following variable: mouseX = event.clientX - ((window.innerWidth/2) - (((Screen.width*Framer.Defaults.DeviceView.deviceScale) /2) - layer.x)) - (198 * Framer.Defaults.DeviceView.deviceScale). I did the same for mouseY, and it doesn't matter how big the layer is or where it's positioned, it works! i hope to figure out the zooming and then i can share the module with you guys. Thanks for thinking with me! :)

Nick Bewley

I made a fun one when exploring this. Only catch is that you must turn your speakers up to 11 when previewing. http://share.framerjs.com/4uhy0qmif30g/

Nick Bewley

Also note that you have to hack a bit to make it work on mobile.

Berend Holtland

awesome! this one is great :)

Keith Lang

Feature request: a property of Canvas for renderingX, renderingY, renderingWidth and RenderingHeight, or some such :)

Read the entire post on Facebook