1

I'm writing a Framer.js function to simulate the 'splash' effect when you tap a button or a layer, as per Google Material Design.

It looks something like this

tapSplash = (tapX,tapY) ->
   tapSplashLayer = new layer
       backgroundColor: "#ffffff"
       opacity: 0.2
       width: 500, height: 1500
       borderRadius: 1500
       midX: tapX
       midY: tapY

After this, I have some code to run the animation.

My question is, how do I get the tapX and tapY coordinates? It is not good enough to use the midpoint of the layer that has been clicked/tapped - I want the animation to originate from the exact point the user tapped on

vedran
  • 1,145
  • 2
  • 13
  • 19

1 Answers1

2

Check out your own answer to the question. I've since then forked it and made changes so that taps on a computer or taps on a mobile device are recognized separately. https://github.com/carignanboy1/Material-Design-Interactions/tree/improved-touch

touchEvent = Events.touchEvent(event)

if Utils.isPhone() || Utils.isTablet()
        tX = touchEvent.clientX - layer.x
        tY = touchEvent.clientY - layer.y
    else
        tX = touchEvent.offsetX
        tY = touchEvent.offsetY
alexismorin
  • 787
  • 1
  • 6
  • 21
  • Awesome @carigna.boy. Yes, I forgot to come back here and answer my own question. Thanks for looking into it – vedran Jun 23 '15 at 09:54