On Hover SVG animation

[Sajidul Islam]

Hi,

 

I would like to get help to fix an issue I'm encountering with the DrawSVG plugin and GSAP.  

 

I would like to animate my SVG element on hover and when I mouse leave it should revert. Currently, It's working fine except- If there are are multiple buttons all animation are executing at the same time when I hove any of the element, which I don't want.

 

I want to execute the animation individually for each button. How can I achieve this effect?

 

Many Thanks,

Sajidul

See the Pen XWQGbyK by sajidulislam0 (@sajidulislam0) on CodePen

[Rodrigo]

Hi,

 

There are a few issues in your demo.

 

First you're creating a single timeline for all the buttons, that is not going to work the way you intend, create the GSAP Tween/Timeline, inside the loop so each button controls it's own animation.

 

Second, you have the same mask name for all the elements, which means that when one mask is animated it affects all the elements with that mask ID, create a different mask ID for each element.

 

Here is a fork of your demo:

See the Pen rNbRxrP by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Sajidul Islam]

Hi @Rodrigo,

 

Thanks you very much for pointing out the issue. It worked as expected. I was thinking something is wrong with my GSAP code where the actual issue was with my markup.

 

Thanks a lot!