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

What is Framer? Join the Community
Return to index
Vedran Arnautovic
Posted Jun 06 - Read on Facebook

In the example I shared earlier (http://share.framerjs.com/r6v36512dvb4/), the tap origin for the ripple effect is correctly positioned when viewing the prototype on desktop.

However, when I view it on devices (tried an Android phone and iPhone), the taps/ripples always appear to be originating from the top left hand corner of the layer that receives the click event.

Any idea why this is different on device, compared to browser? Is there something I need to do differently to handle the click events on device?

Currently, the ripple effect function gets passed the click/touch coordinates the following way

rippleEffect(event.offsetX, event.offsetY, clickedLayer)

3 Comments

Balraj Chana

I've solved it. You're right because ev.offsetX/Y doesn't record the positions on mobile, only desktop. The workaround is to set button.draggable.enabled = false and then assign the cursor's midX/Y positions for the ripple effect to either: layer.draggable.layerCursorOffset.x/y if Util.isMobile() or ev.offsetX/Y if not.

Here's the updated demo: http://share.framerjs.com/d8fd2iyggd7h/

Vedran Arnautovic

Awesome Balraj...thanks! I'll check it out in the next day or so. I've just pushed an updated to the project to GitHub. No major additions, mainly re-factoring

Balraj Chana

You're welcome Vedran, I look forward to seeing the collection!

Read the entire post on Facebook