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)
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/
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
You're welcome Vedran, I look forward to seeing the collection!