Streaming live at 10am (PST)

Animated element interferes with trigger area behind it

Hi!

I’m trying to create an interaction where an additional info star appears on top of each portfolio item on hover. Hover over the first image in left top corner in order to see this in action.

Everything works nicely when the animated area doesn’t overlap the trigger element (hover on the edge of the image), but when it does (hover on center of trigger image), it creates a stuttering effect. How do I “disable” the animated element from interfering with the trigger’s hover area?


Here is my public share link: https://preview.webflow.com/preview/portfolio-5621b6?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-5621b6&preview=93c12282b53ae30ffceec57e336b84eb&pageId=5d56e9a697615115cbaf711d&mode=preview

Hi Ville, welcome to the forum :webflow_heart:

Change the trigger to be the parent element (Pofo element).

What happens now, is that the trigger (Pofo Trigger) is a sibling element to the star element. Once the star is shown, and the pointer is over it, a hover state for the Pofo Trigger element is no longer happening, so the interaction hides the star. Once the star is hidden again, the hover state over the Pofo Trigger is happening again, and the interaction restart… and so on…

1 Like

Thanks @avivtech! Makes total sense and got it working. Awesome, you made my day.

edit: As suggested, I set the containing DIV (whiuch is a parent) as the trigger element.

1 Like