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

What is Framer? Join the Community
Return to index
Juheon Lee
Posted Sep 10 - Read on Facebook

Hi, I have a question!
I wonder why the reaction area differs from the device and the working environment. :(

layerA = new Layer
backgroundColor: "28AFFA"
size: 250
point: Align.center
shadowColor: "rgba(153,153,153,1)"
layerA.onTouchMove ->
xInLayer = Events.touchEvent(event).clientX - layerA.x
yInLayer = Events.touchEvent(event).clientY - layerA.y
newHue = Utils.modulate xInLayer, [0,250], [0,360], yes
newLightness = Utils.modulate yInLayer, [0,250], [95,0], yes
this.backgroundColor = "hsl(#{newHue}, 95, #{newLightness})"

3 Comments

James Jun

It's the differences in how Framer handles touch inputs on desktop vs mobile. It's just the nature of the underlying framework at the moment. Possible workaround is creating a canvas-sized layer at the beginning of touch and calling the onTouch (and relevant logic) in that layer and then removing the layer at the end of the touch.

Jonas Treub

If you use touchCenterX and touchCenterY the numbers should be same on desktop and mobile. The client points don't work nicely with Framer layers because they don't take pixel density into account.
Here is an example: https://framer.cloud/SPtNF

Juheon Lee

I want to say thank you a lot James Jun & Jonas Treub!
I'll try to apply your hints to my code. I tried all day, But I couldn't solve a problem.

This is just because I do not have the skills to apply your code yet :)
But I'll try and I'll share the solution of this problem in the near future!

Read the entire post on Facebook