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

What is Framer? Join the Community
Return to index
Anton Jarl
Posted Jul 07 - Read on Facebook

Quick question. I have a menu on the left side and a menu/panel sliding out from the right. Whenever the menu or the panel is visible I want to stop all other interaction (like you shouldn't be able to slide the content in the background or click any buttons). I have an Overlay-layer that also appears under the menu and panel to darken the background.

How would I do this? Do I have to stop all event listeners on all the layers, or could I have the Overlay layer collect all clicks and just du nothing with them? What's the best approach?

10 Comments

Balraj Chana

You can just filter through all of the layers inside of your object and set ignoreEvents to true for the layers which are not part of the navigation drawer. It would be easier with a code sample :)

Jordan Robert Dobson

I would just overlay a layer that collects all events and allows nothing to pass. That's the easiest catch all.

Chris Camargo

Shouldn't an overlay layer do that by default? If you place a semi-transparent layer above your click targets, they shouldn't receive a click.

Jordan Robert Dobson

Yes it should... you probably don't have to have it collect any events actually.

Anton Jarl

Well, they overlay layers doesnt collect any clicks right now. Don't know if I missed anything. Also my overlay-layer is fading on (two different states, 0 and 0.5 opacity). That means that the overlay layer is always there, so if I make the overlay layer collect all clicks, nothing beneath it would ever be clickable right? Is there a property like visible: or hidden: that actually hides the layer from the canvas so that it doesnt collect any clicks until it's visible?

Jordan Robert Dobson

Yep. Visible is what you want.

Chris Camargo

layer.visible = false

Just make sure you add a delay so that it matches your state animation, or employ a callback like:

layer.on AnimationEnd, ->

Anton Jarl

Jordan Robert Dobson Thanks. Visible: hidden together with a Utils.delay worked perfectly. Now my overlay layer fades in and then blocks all click events. Until it is gone, then everything is back to it's original state again!

Anton Jarl

Chris Camargo Thanks, I already did the delay and it worked! The Animation.End, -> solutions seems better though since it will work even if I re-time my animations later on..

Jordan Robert Dobson

^ yep that's the idea. Sometimes users will get ahead of your animations so you might not want a delay or a smaller delay. Something to consider depending on interaction context.

Read the entire post on Facebook