Card flip animation on hover glitchy

Design help Animations & Interactions
1

Hi I have followed the web flow University recommended way of creating a card flip on hover animation which works, but the problem is that if the user is moving the mouse over the card while it is flipping it gets all glitchy and doesn’t flip but it tries to. Its really not great. I cant not think of a way to fix it. I need to get this sorted out. Any help would be greatly appreciated. Thanks!

Below is my share link

Here is my public share link: (Webflow - Mediocre New Site)

2

I had this same issue. I had to create the animation on the card container - so the most outer card div (not the actual card itself) - for it to work. If you don’t have a parent container for the card, wrap it in one and put the animation on that. The problem is that when you card’s x-translate get’s to the middle the hover function can’t work because your no longer hovering over the card element.

1 Like