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

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

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 problems
1. 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

16 Comments

Seoh Char

how about this?
Bubble.on Events.Click, (event, layer)->
tapSplash(event.x, event.y, layer)

Vedran Arnautovic

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

Balraj Chana

You can target the pointer position using event.offsetX/Y. Here's my example: http://share.framerjs.com/8uvn2q3mao22/

Johannes Eckert

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

Vedran Arnautovic

Balraj Chana slick implementation - thanks!

Balraj Chana

You're welcome Vedran :)

Vedran Arnautovic

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?

Vedran Arnautovic

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?

Balraj Chana

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.

Vedran Arnautovic

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

Balraj Chana

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?

Vedran Arnautovic

Balraj ah, that could be the problem. I have an older version of Safari

Balraj Chana

Cool :) The latest update on OSX is May 9. If you're on Windows, Apple have stopped supporting Safari since 5.1.7

Vedran Arnautovic

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!

Balraj Chana

Awesome, there are a few ways of getting around it. Anyway have fun :)

Stevo Di Donato

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

Read the entire post on Facebook