Streaming live at 10am (PST)

Hover animation stops the move animation?


#1

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.

Check it out in webflow: https://preview.webflow.com/preview/patrik-interaction-design-portfolio?preview=91e5718db5d5a9ea4cd0186a0377e6c6


#2

You suspect good.

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


#3

Awesome, that worked much better, thanks!

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


#4

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 */

You need to publish to see if it works.

Messy example page: http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html
Code from: http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements


#5

Ah, thanks, right I did not know custom css was supported like that, but makes sense now that you mentioned it, neat!

Great that makes a lot of custom things easier! wink

And I can report that the click-trough css code worked like a charm.

Thanks!


#6