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.
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.
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
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.
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?
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.
