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

What is Framer? Join the Community
Return to index
Giovanni Caruso
Posted Mar 08 - Read on Facebook

Hi! Scratching my head on getting X/Y values using Events.touchEvent(event): .clientX gives back a different value for X if testing the prototype on framer studio or on my mobile device.
This is an example:

Framer.Device.screen.width is 640px

#print 'red' if touch.clientX below 213
layerA.on Events.Click, ->
touch = Events.touchEvent(event)
if touch.clientX < (Framer.Device.screen.width / 3)
print "red"

Is there a proper way to write this?

9 Comments

Joshua Tucker

The issue you are running into is the fact that clientX is looking at the size of the fully-rendered window to show coordinates, not the device itself. So naturally it's going to be different from device to device because the Framer window is being accounted for too (I think). Does this article help at all? It explains how some of these coordinate calculations work. I typically use pageX because it works well on mobile. Maybe this might help you with some math to better hone in on touches that are inside your device view.

http://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y

Giovanni Caruso

Hey Joshua. Thanks for your help. I did some test with touch.offset. It works fine (http://share.framerjs.com/rabp63vflevu/ - spaghetti code and some tuning needed on offsetY :) ) . Unfortunately this solution doesn't work on mobile.

Joshua Tucker

Giovanni Caruso Yeah, if I am using mobile to test, I test strictly there and disregard output values in Studio.

Giovanni Caruso

Yeah. Probably I need to reconsider my workflow a bit even if I found easier to test the whole thing on Studio.

Joshua Tucker

Sometimes what I'll do is get it working in Framer Studio fully, and then incrementally translate some of the events and code to be more mobile-friendly and test frequently.

Johnny Chen

thanks for this thread.. was seriously scratching my head for a while

Giovanni Caruso

Johnny Chen at the end I've used a function made by Jordan Robert Dobson to have a working prototype with touch events (both on studio and mobile). See this example: http://thebuttonshape.com/blu-portfolio/flipboard-add-magazine-interaction/.

Jordan Robert Dobson

Giovanni - the only place I've had issues was when people at MSFT with a hybrid device (touch & mouse) used the app. I haven't quite resolved that case yet... But it's probably uncommon unless you work with a lot of people with Windows.

Jordan Robert Dobson

Giovanni Caruso - I noticed the link to your demo is taco'd on your site.

Read the entire post on Facebook