I have a logo that “rolls” into view from the left side. (click link below to see it yourself)
That works fine, however if the user has the mouse in that area of the screen the move-left animation stops and that looks a bit strange. I suspect this is because I also have a on-hover animation attached to the same object.
To test, reload page and have the mouse top-left where the logo rolls in - for me it stops and disappears.
To test the other animation (that might interfere), let it roll to it’s place next to the text and click it.
Drag a div and give him a name + display:inline block.
Put the image in it
Remove the hover from the interaction you’ve created
Unaffect the interaction from the image, affect it to the div
Create new interaction with hover and affect it to image
Run
Goto beer
When the page loads (published mode, not preview) it starts the scroll animation, so I simply removed the on-scroll effect.
A follow-up question: I have some text that appears when you click the logo, however this text “covers” the logo from the hover animation. This is a minor thing, but I’m curious for future reference if there is an easy way to make en element “click-trough-able”.
I was going to answer no because in Webflow as it is, it’s no. But I found a css property I didn’t remember that do that:
pointer-events: none;
So add that as a custom code. Go to your site dashboard, custom code tab.
If you gave the class “logo” to your logo element, paste this code in the Head section (the whole thing, the comment is for you to remember what’s the code for later):
/* to make my logo click-through */
<style>.logo{pointer-events: none}</style>
/* end */