Streaming live at 10am (PST)

Strange animation behaviour

#1

Hello, I am creating a hover interaction for my portfolio, which does not work properly at the moment. I have a list of project titles and a gif which displays all of them in a loop. I have created a set of hide/show mouse hover interactions for each project title by adding a separate image of the particular project. In other words, I’ve achieved an effect that when you hover on a particular project, the default gif hides and an image of a particular project shows.

Overall, the interaction works fine when you hover vertically, but horizontally, it sometimes displays two images at once (see below) despite the fact that the gif is set to display none.

Is there a way to fix it? I thought a different text layout could help, but nothing looks quite right besides centred text alignment. Maybe there is another level of interaction to add, or fix something in the existing one?

I would really appreciate someone’s help.

Project link: https://preview.webflow.com/preview/elizas-exceptional-project?utm_source=elizas-exceptional-project&preview=cef5c0ff1640b57c27ad3ba3a1fda71e