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

What is Framer? Join the Community
Return to index
Noah Levin
Posted Aug 07 - Read on Facebook

With the latest build I'm running into something weird when trying to set style.pointerEvents = "none". It seems if I have any event on that layer, it turns it back to "auto" for me, which is not what I want. For example:

Page.style.pointerEvents = "none"
Page.draggable.enabled = true
# also happens if I write a click event attached to Page

This resets Page to have pointer events set to auto... is there another way you recommend blocking clicks for invisible elements while keeping animations working nicely? I find using visible instead of pointer events gives me less control over opacity animations, and these were working fine for me earlier?

EDIT: Looks like if I set pointer events to none after these events it works, but not sure why order should matter here.

7 Comments

JT DiMartile

Additionally a parameter like "autoHide:true" that looks at opacity and toggles visibility (like in the greensock framework) would be great for things like this.

Koen Bok

Hmmm yeah so I tried to be "magically smart" with pointerEvents, which is obviously not working :-)

Now it just always enables as soon as you add an event to a layer. Maybe I should make it so that as soon as you edit it by hand, it won't do magic anymore.

https://github.com/koenbok/Framer/blob/master/framer/Layer.coffee#L606

Noah Levin

Following up on this, should i file a bug? Or do you have a different recommendation of how to block clicks? Saw another thread come up in this group on this topic today, and also at google someone was asking about how visibility works, presumably for related reasons.

I've been using something like this from Cemre's library:

Layer::show = ->
@.opacity = 1
@.style.pointerEvents = 'auto'

Layer::hide = ->
@opacity = 0
@style.pointerEvents = 'none'

Ces Cortez

I ran into this yesterday and my workaround was setting it in CSS with !important: https://github.com/cesperson/framer-layered/blob/gh-pages/example.css#L39

Koen Bok

Bug would be great! Shouldn't be too hard to fix.

Chris Lee

I actually just ran into this yesterday as well: https://github.com/koenbok/Framer/issues/100

Read the entire post on Facebook