Has anyone been able to implement an example of the 'splash' effect on tap, or 'touch ripple' as defined in Google's material design (http://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-user-input)?
I'm having two problems1. getting the true tap coordinates
Bubble.on Events.Click, (event)-> tapSplash(event.x, event.y) # do other things after the splash
2. tapSplash is the function which creates the splash effect, however it doesn't seam to return control back to the Bubble click event handler, so the stuff below it never runs
how about this?Bubble.on Events.Click, (event, layer)-> tapSplash(event.x, event.y, layer)
Thanks Seoh Char, it was actually coffeescript whitespace sensitivity that got me on the second issue (I'm new to it). Regarding the first one, I see that Johannes Eckert posted a solution earlier
You can target the pointer position using event.offsetX/Y. Here's my example: http://share.framerjs.com/8uvn2q3mao22/
woo, offsetX/Y is awesome. it gives you the coordinates relative to the layer where the event is fired. It looks like Firefox doesn't support that one, they call it layerX/Y
Balraj Chana slick implementation - thanks!
You're welcome Vedran :)
Balraj Chana, when I change the shape of your button to a circle, and try to clip 'ripple', it still animates past the edges of the circle. inside your 'rippleEffect' function, I've tried layer.clip = true and also layer.force2d = true, but neither helps. Any thoughts? Is this a know limitation of Framer?
OK, I've 'solved' the problem myself. Looks like it doesn't work within Framer Studio, but when you export and view the design in Chrome, it works fine. Is this because Framer uses Safari to generate the preview, and Safari's rendering engine is different?
Hey Vedran, You're close! I don't think Safari is the problem as both Chrome and Safari are webkit browsers. Anyway I've solved the masking issue and you can check it out the solution here: http://share.framerjs.com/g47u3exlw8jd/
All I did was add force2D: true and index: 0 to the ripple layer. You can also achieve the same effect by setting force2d to all the sublayers of the button. But that's tedious :)
The reason why the circle button wasn't masking the ripple was mainly because of an indexing issue. The button has 2 sublayers, the text layer and the ripple layer. The button.index is n and the text.index is always 1. The rippleEffect function creates and destroys a layer for each click. This means that the index of the ripple layer (sublayer of button) was starting at 2 (after the text layer) and incrementing by 1 for each click. The ripple layer's index has to be set before all the other sublayers for the animation to work. Hope that helps.
Thanks for the detailed explanation Balraj Chana, makes perfect sense and I'll implement that in my app. However, for some reason, there is some difference between safari and chrome - it works in chrome
Vedran, do you have the latest version of Safari? It works exactly the same on both Chrome and Safari for me. May I ask what the difference is?
Balraj ah, that could be the problem. I have an older version of Safari
Cool :) The latest update on OSX is May 9. If you're on Windows, Apple have stopped supporting Safari since 5.1.7
Balraj, nah not Windows. I just haven't upgraded my macbook at home. The one at work is on the latest version. Annoyingly, this clipping doesn't work when you import a circle layer from Sketch, so I have to draw it in Framer. Not a problem. Just started using Framer and love it!
Awesome, there are a few ways of getting around it. Anyway have fun :)
Balraj, not to bring up an old post, but I'm still getting the same problem. The ripple is moving outside of the defined object