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

What is Framer? Join the Community
Return to index
Anton Kartashov
Posted Aug 03 - Read on Facebook

Hi everyone. I have a problem with two simultaneous events. When the second (card.on Events.MouseOver, ->) starts, the first one (back.on Events.MouseMove) don't work.

And a question: What a global object can I use for events happening on the whole screen (like "document.on", "window.on", "Canvas.on", "Screen.on")?


Joshua Tucker

Hey Anton! What are you trying to accomplish with this interaction? If you're looking for a way to detect when the popup layer is inside the card layer, you can use 2D collision detection instead. That way you don't need two event listeners. I built an example showing you how that could work:

I included a couple other things for you inside this prototype:

– I built a module a while back called scaleFrame. This module allows you to calculate a layer's new frame properties (such as coordinates, width, height, etc.) if the layer has been scaled. Scaling an object in HTML doesn't change the frame properties of the element itself, just it's visual presence, so this module can be helpful for things just like this. Using scaleFrame, you can setup the collision detection to use the confines of the scaled element too, which means if you drag outside of the card layer, it will re-adjust once you leave card layer's new scaled size, not its original size.

– To answer your question, you can use window or document to add a global event listener. All HTML Document objects are inserted into window so either one is fine to my knowledge. The window is considered the confines of the browser window itself whereas document is the HTML content inside the window. For touch and mouse events, either is fine, but results are different when you say use an onresize event listener on window versus document.

Window and document are not hooked up with nodejs event emitter (i.e. using .on), so you will need to use HTML syntax (documented here:

document.addEventListener "mousemove", [function name for your handler]


document.addEventListener "mousemove", ->
do whatever inside

– If you were to say animate values of card when the popup layer is inside it, you will want to have something setup so the animation doesn't continue to fire each time the event makes a loop. Constant firing can cause a lot of problems, including jitter or noticeable performance lags. I opted to using a function and Underscore's once function. Along with some logic, the change between values on the card only gets fired once until an if statement is satisfied. This can be helpful for lots of things, actually, but in relation to Framer, it's great if you're using states and don't want events to continue to trigger states or animations while inside an event function.

Cheers! Sorry for the massive breakdown, but if this doesn't answer your question, I'll be sure to revamp my answer accordingly ;). Keep up the good work my friend!

Anton Kartashov

Joshua Tucker Thank you so much, Josh! Didn't expect such a detailed help.

As I understood: 1) we can use "document" but with "addEventListener" instead on "on"; 2) you use "if" inside the event listerner for detection of cursor inside card.

Thank you for your time (and module)!

Joshua Tucker

That is correct. The short explanation for 1) is that many objects in Framer, like layers, include nodejs' eventEmitter class ( Window and document do not include/use nodejs, which is why you need to write .addEventListener/removeEventListener for them.

2) The use of the if statement in the event listener is the method of 2D collision detection ( Collision, in this context, means touching (which includes inside). The reason the if statement inside the event listener is relevant is that you want to be checking whether the layer is inside the other one at the same interval that the event is firing.

Read the entire post on Facebook