Hover animation in wrong state on page load

Design help Animations & Interactions
1

I’ve set up a simple animation so that on hover over a div box the image lowers to 30% opacity and blurs 2px and a text element goes from 0-100 opacity, and then reverses to normal on hover out. But when the page first loads, the image starts out at 30% opacity and the blur with the text visible. If I hover over the image, then hover out, the image displays as it should and the animation works fine from that point on. Something is happening on page load to make it initially display at the end point of the hover animation.

You can see it on the Clients page on the upper left head shot photo, it should be the only one blurred and darkened.

Thanks,
Michael

Here is my public share link: [[LINK](Webflow - Saga Recording)]
(how to access public share link)

2

Anybody have any thoughts on why this is happening?

1 Like
3

This is happening for me as well. I had a similar issue that resolved itself naturally… but I still have not been able to solve this… any luck?

4

I would guess the problem came from the initial state. @Rudy_Arnold if you have a similar problem, feel free to create a post with your read only link or message me and I can take a look.

5

I’m having the exact same issue. Did anyone get a fix for this problem?

  • I have a grid with CMS projects as the thumbnail and Text overlay, the animation makes the text appear, but when first loaded the text starts visible. Then once i hover over it the first time, it animated correctly then behaves as it should going forward. Its initial state is broken.
6

I was having this issue and found this other forum link:
Hover states appearing on page load and it solved my issue. I also clicked on each state to make sure they were in order, as they were somehow reversed, which was causing this same exact problem.