Hover animation only works in Designer preview but not published page

Hi Webflow masters out there,

I was trying to make some not-so-fancy hover animations for a page, it works in the Designer preview however when I checked it on the published page it’s totally broken. The page layout might be a bit complex but it works fine in preview, I am not sure what has possibly went wrong…

The animation I had problem with is on the bottom portion of Spoofs page (access from navigation menu on the left), where when you hover on the title list will trigger the animation. In Designer preview I got what I want, a few images animated into different positions but on the published page the animation is nothing even close to that.

Any help and comments are appreciated! Thanks in advance!


Here is my public share link: LINK
(how to access public share link)

Sorry I forgot a note:

When accessing through the public share link please go to the Spoofs Copy page.

Hey there,

Can you please post your read-only link and members can take a look.

Initially -

The hover is on each link … and so is the interaction. Yet, the links are connected 1 next to each other, so the interaction is being by-passed (or not allowed) for the link hover.

Without seeing the site, I would say -

Try spacing out the links and let the mouse cursor ‘Hover Out’ for a second before hovering over the next link. This may give the interaction more time to animate. Of course, just off the top of head. When you share link, we can inspect further.

Hi there,

Thought I included in the second link, but here is the link again.

Thanks

Yep I just checked and it shows the same in Designer Preview as it does in Live Site. I’m trying to understand why you used a hover action for this? I would suggest changing to a Click Trigger. Simply because the Hover doesn’t have an ‘Active’ state, so naturally you’d need to close the wrapper - and you need to - move the images back off.

  1. I’d switch to Click: Then you could accomplish both of those extras hover interactions in the panels. Because the 2nd click would move both out.

  2. Then you won’t have that strange movement. Native hovers tend to sputter a little sometimes in my opinion. For some reason the JS can hesitate. Try just 1 Click Trigger to handles that wrapper & images all in one.

  3. I believe you would eliminate the mouse cursor mishandling the next action.

Hope that helps.

Hi thanks for the reply.

I’d like the animation to stay as hover stage triggered if possible, because each of those title will later be linked to another page.

I am still seeing different results from the Designer Preview and Live Site… Just want to know if you are able to see the same result as I did.

In Designer View, when you hover on the title, 5 images will be animated and change to specific position behind the titles. While in Live Site the animation is very different and random, each hover only shows 1 or 2 image(s) and the position of them are off.

Beside changing it to Click, do you have other suggestions on this? Also, any clue on the different results I am getting between Designer and Live?

Thanks a lot again!!!

1 Like