Animate on mouseover still happens on mouseout

[keith101]

Hey guys, I have an issue where if i hover on and off the link too quickly the animation will still play (in this case scale:2). I'm guessing this is because the animation happens in 0.3s and if the mouse is off the link before then, then it will not detect the mouseLeave or mouseout function on the 'a' tag.

 

Question is: How do I stop the animation from happening once the user goes off the link if it happens before the 0.3s?

 

PS. I'm still new to GSAP, transitioning from DIY javascript so i'm still getting used to how things work.

Thanks

See the Pen XWXYVQy by KeithPaul (@KeithPaul) on CodePen

[xaviergd]

Just add on both your #outer_circle tweens overwrite: true after scale, that should take care of it

[keith101]

Works perfectly! Thanks a lot buddy, had me stumped for a while 🙃