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

What is Framer? Join the Community
Return to index
Josh Davis
Posted Jun 25 - Read on Facebook

Quick question: How do I add multiple on click events to separate layers? Here's my code; can't think of anything I did wrong (though obviously it's something).. I have three layers. I have on click events for the first two - when the layer is clicked, the opacity goes to 0 revealing the next layer. The final layer has scroll. Thanks for your troubleshooting ideas!

8 Comments

Kai Si

When you set the opacity of a layer to 0, it's invisible, but still there, which blocks the touch event for layers underneath it.

You should get screen1 out of the way when it's touched, so that it doesn't block screen2. There's a variety of ways to do this, e.g. set screen1.index = 0 (puts it behind the other layers), screen1.sendToBack(), screen1.scale = 0, etc.

Similarly, if you want to interact with screen3 after screen2 is touched, you'll have to get screen2 out of the way.

Carlos Santiago

^^ was wondering the same thing, thanks

Chris Camargo

Don't forget layer.visible = false. That will also hide the layer so it doesn't receive input. Though if you're animating its opacity to 0, you may want to call that on AnimationEnd, or with a delay that matches your animation length.

Josh Davis

Brilliant, thanks Chris and Kai! Alas, it was a dumb error on my end. Much appreciated. Carlos -> glad my question and their answers helped!

Carlos Santiago

oh yeah, trying to wrap around my head all this, i just got the trial!

Josh Davis

Kai Si or Chris Camargo - any idea why when I add a scrollComponent to my screen2 layer it not only doesn't allow a click event on that layer but when I try to scroll, it always bounces to the top, it never remains where I scroll? http://share.framerjs.com/fydn2l6sm75v/ Thanks for your thoughts!

Kai Si

ScrollComponent.wrap(screen2) makes the ScrollComponent the same size as screen2, so there's no space to scroll. Try making scroll.height = Screen.height or something smaller; the ScrollComponent will be smaller than screen2, so screen2 will be able to move.

As for the click event, I'm not completely sure, but the framer.js docs say that "The ScrollComponent itself is a layer that masks its content". This makes it sound like the ScrollComponent will intercept any click events, and the contained layer (screen2) will not recieve the click event. A workaround would be to add the ".on Events.Click" handler to the ScrollComponent instead, but keep in mind that scrolling probably counts as a click event.

Josh Davis

Kai Si thank you so much! You're really helping me. I owe you one! Interesting about the ScrollComponent. Essentially, I'm trying to recreate the iMessage functionality: Scroll your messages then click into the one you want. I'll figure out how to do it. Surely there's an easy way.

Read the entire post on Facebook