mouseenter, mouseleave drawSVG button

[Rossmiester]

Hi, 

 

I am having a hell of a time trying to figure this one out. I have spent days tweaking code, rewriting code, etc. 

 

The codePen below shows you in a nutshell what I am trying to do. Though it seems like it is working fine, on mouseleave gsap should reverse the drawSVG animation so its a nice smooth animation. Obviously I am missing the gsap drawSVG plugin files to render it all how it looks on my computer. 

 

Issue: Current code will loop through all the buttons but fire all button animations at the same time. So, when hovering one button, the other buttons also hover and the drawSVG is seen animating on all buttons. I am trying to have it so on hover of one button it performs the hover drawSVG animation on that specific button. Any help would be great. Thank you!!

 

 

See the Pen VwOrxxV by MikeyJRossi (@MikeyJRossi) on CodePen

[Rossmiester]

Attaching video of what is happening on the website.. thank you!

[GreenSock]

Yeah, that's because your tween animates ALL of those elements. I assume you meant to do something more like this?: 

See the Pen eYaeray?editors=0010 by GreenSock (@GreenSock) on CodePen

[Rossmiester]

OMG! Y'all are amazing! Exactly what I wanted to do. Damn, took me days and took you all of a few minutes. Oh well, at least I am learning along the way lol. You all are rockstars and I appreciate this community so much. I will always be a member! Thank you!!

[Rossmiester]

If I could ask a question about your solution... what does .closest do? I also never thought of doing a foreach loop. Thanks a million!

[Rodrigo]

1 hour ago, Rossmiester said:

If I could ask a question about your solution... what does .closest do? I also never thought of doing a foreach loop. Thanks a million!

This is when having MDN in your bookmarks is a great idea, no matter how many years you've been in development those resources always help 😉

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

 

Happy Tweening!

[Rossmiester]

@Rodrigo Noted! MDN bookmarked! Thanks buddy!