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

What is Framer? Join the Community
Return to index
Vignesh Sachidanandam
Posted Apr 13 - Read on Facebook

Hello. I'm trying to prototype a delayed hover interaction. The behavior I'm trying to prototype is as follows:

1) When hovering over an icon, provide a hover effect (change color). Change back to initial state onMouseOut

2) When lingering over the icon (i.e. hovering for x seconds), display a flyout with additional options. Reset this timer onMouseOut (so the flyout doesn't show in less than x seconds / immediately the next time the user hovers over the icon)

3) Hide the flyout onMouseOut (immediately)

I'm having trouble reliably achieving 2) using delays. Any guidance? Adding a screenshot of what I'm currently trying to achieve 2). I think I need to set/clear timeout in a different manner, but wasn't sure how to do it.

Thanks for the help!


Benjamin Den Boer

Hiya Vignesh Sachidanandam — I've tried to reproduce this in a very simply, low-fi example — is this what you're after? :-)

Floris Verloop

Here's another example that has an added "active" flag. When it's about to show the "more options" layer, it checks if the hover is still active:

Vignesh Sachidanandam

Thank you so much Benjamin and Floris ! Very helpful :) Floris' example was exactly what I was trying to achieve. I was missing the "active" flag. Much appreciated!

Read the entire post on Facebook