Sajidul Islam Posted April 25 Share Posted April 25 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted April 25 Share Posted April 25 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! 1 Link to comment Share on other sites More sharing options...
Sajidul Islam Posted April 25 Author Share Posted April 25 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now