Issue in Mouse hover animation

Design help Animations & Interactions
1

Hi , I am working on mouse hover animation on a card. It is working fine when I use only hover in animation. But animation messes up (Card blinks) when I implement changes in Hover out animation.

Can someone have a look and check what is the issue?

Here is my public share link: Webflow - Fitness Site Rebuild

2

@Stan can you help me with issue?

3

hi @Sarthak_Jain I do not see any flickering as you do not have OUT animation set up. anyway here are my tips:

  1. stripe down all your hover settings
  2. run your animation on Image_Block instead of the Image itself
  3. pay attention to what elements of your interaction are affected, like only children with this class etc.
    I did a short test to create hover in-out and had no issues. More info about how to can be found on WFU.
4

HI @Stan . Thanks for your tips. They are very helpful. I am able to workaround the animation.

But one small issue, When I re hover on the card for second time the content is not moving as it was moving for the first time.

Can you help me regarding this issue?

5

hi @Sarthak_Jain when you set state to move something on hover in, this mean that you have to set opposite on hover out to get its init position.

if you do not have further questions feel free to close your request as solved.

6

Thank you. Now its working.

1 Like