Streaming live at 10am (PST)

Mouse Hover Interaction - Hover Out logic not clear to me

Hi,

I finally dare to make my first post - I checked a lot of posts for an answer to my mouse Hover issue but I did not find an answer to my issues. Since I am fairly new to interactions on webflow I guess the issue it is me not getting it. Help is much appreciated.

1. Issue
So I got this setting

Now I added multiple interactions on the Headings:

So hovering on “Space” triggers:

  • BG colour change
  • rotation of the distorted blop
  • text moves in and scales to 100%

All 3 Headings have similar behaviour.

Now, naturally I wanted to reverse the actions once i hover out of the Headings, so the texts do not stack over each other and will th trigger resets. When ever I add any kind of hover out interaction all my interactions get funky.

2.issue

I transformed elements out of my nav bar so a little interaction is showing when the home page loads.

I finally arranged in line on chrome but when I now open it in firefox or safari the the vertical alignment is broke:

Of course this is only elated to desktop version. Again as I am new to Webflow I have no clue how to solve this or if I simply want too much interaction to happen in one place.

Many thanks in advance for your comments & help
Simon


Here is my public read only link:
https://preview.webflow.com/preview/new-nuevo-neu?utm_source=new-nuevo-neu&preview=81c0ceacdbccc964e81ef16d8c65ed37

Hey @Pambeloo,

Welcome to the forum! good luck! First steps are always the hardest…

Regarding the 1st issue- your interactions are not simple- quite complex! nice! I would try again from scratch, since you already have all the steps in your head, it will probably go better this time. If not, leave the ‘hover out’ interaction as best you can do, and I will take a look at it (now there’s no hover out interaction at all).

The 2nd issue is also, quite tricky. Determining the initial position of different elements with different positions and fonts sizes is not simple. I think it will be easier to first align them all as they appear here:

and use the interaction without the initial state part.

Hi @avivtech ,

thanks for the quick reply! Much appreciated!
1.issue
I added the hover in/hover out interaction again and played a little bit around. It works much better now since I avoided that the content moving in actually crosses the mouse&Trigger. However sometimes there are still hickups - seems to be trigger related but not sure. Could you have a look a tell me if there is something that I could edit to make it reliable?

2.issue
I aligned it again without initial state - again works perfect in preview and chrome but not in firefox and safari. Anything else I can do in order to avoid this?

thanks again!
Simon

Can you share the published site link? (so I can take a look with safari)

Sure, sorry - I was not sure that you need this one, too.
https://new-nuevo-neu.webflow.io/
thx!

Seems to work great in Safari

1.issue

thx for checking. good to hear the animation works!

2.issue
This confuses me though. I double checked and this is how the alignement of new,nuevo,neu looks for me in Chrome (aligned):

and this is how it looks for me in Safari and Firefox (not aligned):

Does it appear aligned for you in Safari?

thanks again for all your help!
Simon

No, it appears crooked for me as well. I believe it is still the same reason - the alignment you apply to them by pixels.
What I meant when I wrote to first align them all, was to use a single div to wrap them all together, in a vertical alignment, and place the div in the centre of the screen, with position:absolute. Then have your go on the scroll interaction moving them up to the top position.

thx! will do as advised!

1 Like