Animation on hover misbehaves when hovering quickly

[fionchadd]

Hi there, 

 

I'm working on a hover effect at the moment and it's *almost* perfect, it's behaving exactly as I want *except* if you're hovering on an item and you quickly move your mouse off and then back onto the item, the image disappears while the rest of the hover state (background colour, opacity of other items etc) remains. 

 

I can't work out why this is happening but any advice would be greatly appreciated! 

 

Many thanks

Hannah

See the Pen 3034dc262d70dee868e41adef613463a by fionchadd (@fionchadd) on CodePen

[mvaneijgen]

I'm not completely sure if this will help you, but your problem made me thing of a tutorial @Carl did on his Youtube channel. The logic in there is a really solid way of handling these types of animation. Hope it helps and happy tweening! 

 

 

[fionchadd]

Ah thank-you! I've heard great things about Carl's tutorials so I will check this out

I think I've fixed my issue!! If I pause the timeline that I *don't* want to run on mousein / mouseout, it seems to behave better. Revised codepen here: 

See the Pen 0897d4e85c838cdb1bba34d82e7e8591 by fionchadd (@fionchadd) on CodePen

 

[fionchadd]

Carl's approach sounds better but I need to properly focus on the video and my brain's not in that headspace at the moment. I've just bought access to his creative coding pack