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

What is Framer? Join the Community
Return to index
Wouter Walmink
Posted Sep 07 - Read on Facebook

I might be missing something in the docs, but how do I get around this problem?

I have a layer that animates on Events.MouseOver, and has a couple of children. When I hover of the children, the MouseOver event triggers again.

How do I make the event only trigger when entering the layer, not also when entering the children? Is there some way in Framer to stop events from bubbling up? Or is there an option to avoid triggers from children?

Maybe it's because I don't understand what object the "event" exactly is, that I am getting. Is this a native event JS object?

Thanks :)


Benjamin Den Boer

Hey Wouter! Is this what you're after: a superLayer containing subLayers animates on MouseOver. One or more subLayers extend the bounds of the superLayer and then hovering over one of these children the animation should not trigger, but only when hovering over the superLayer.

Like this? (Circle is also within the parentLayer, but only if you hover over the parentLayer it starts to animate)

Wouter Walmink

Thanks for the response! ... but that's not what I was after :) I'll try to be more precise:

parentLayer has a number of childLayers (these sit within the bounds of the parentLayer). The parentLayer has a MouseOver handler, which makes it animate. When I move into the parentLayer, the event triggers and thus the animation starts. However, when I then move my cursor into one of the childLayers (all the time staying with the parentLayer's bounds), the MouseOver triggers again.

How do I avoid this additional triggering from happening? In jQuery, there is a thing called 'mouseenter' and 'mouseleave', which ignores moving over child layers (when coming from the parent layer).

Wouter Walmink

At the bottom of this page, you can see in the demo how jQuery handles 'mouseenter' differently from 'mouseover'.

Benjamin Den Boer

Ah, I see. You can use the "mouseenter" and "mouse leave" events in JavaScript (and thusly Framer) as well :)

parent.on "mouseenter", ->
parent.on "mouseleave", ->

Wouter Walmink

Oh, great, that would do the trick!
By the way, is there any documentation on the event object that's passed to the event handler? Would be great to have an overview of what's in there.

Jordan Robert Dobson

Its the same that you'd get via a standard browser.

Isaac Weinhausen

"mouseenter" and "mouseleave"— this is exactly what I was looking for!!! Seems like a common issue, wonder if it would make sense officially supporting it?

Read the entire post on Facebook