Hidden SVG elements can still trigger events problem

[RoaldKamman]

Hey everyone, 

 

Thanks for taking your time to try and help out. 

 

This is my first time animating through JavasCript and GSAP so please bare with me. 

 

I'm currently running into an issue where I'm trying to create an animation on this SVG that has some hover and click event listeners/handlers. 

 

At some point the original elements that I bound to the handlers disappears intentionally. But the click and hover handlers are still on the same coordinates. And they keep triggering events. 

 

I tried: 

* 1 - I tried disabling the elements with things like: $buttonGroup.disabled = true;. I believe this worked with the click event but failed on the hover handler when I tried it. 

 

* 2 - building an if statement around the hover function that checks if the button has been clicked. let hoverActive = true;. gets set to hoverActive = false; when the button is clicked. 

 

The spiral and button elements shouldn't work after the button has been clicked once. And not reappear through hover or click actions. 

 

Any help would be highly appreciated :). 

See the Pen NWGaYmj by RoaldKamman (@RoaldKamman) on CodePen

[Carl]

Using autoAlpha:0 will set opacity to 0 and visibility to "hidden" which will also disable mouse events.

 

See the Pen LYpzmRY?editors=0010 by snorkltv (@snorkltv) on CodePen

[RoaldKamman]

That worked! Thank you, Carl.  

[RoaldKamman]

Is there a way to disable the mouse events without reducing opacity?

 

If you hover out of the button before the transition is completed it still triggers events. 

[Carl]

since you are using jQuery look into off() https://api.jquery.com/off/

 

I'd also recommend just a google search for remove event listener

[PointC]

Hey... looks like @Carl is taking some time off from tutorials and dropping in for a visit. 🆒

[RoaldKamman]

Thanks for helping out @Carl I got everything working now! Here is the implosion effect I was working on. It's going to be the intro to my fewd portfolio that I'm working on.

See the Pen bGVoxOK?__cf_chl_captcha_tk__=7e9313fc957d36a6edfde2fc032a65c2b41a49cf-1588377931-0-AdUN5LSnNZFzqDm_MV5yJNE4TdXOLw2Dh0cvlo-e19C8DXE3VCUpDFGugb_lOig1h77xc_z6jX7MgMu0slOac5Pzl1hKpyRzoPh9MvEqNyASOdM4gyg7SYs9QAkZDPnJ8NpF3mje9ulgyW29xbzQuS6CMfEcPe_rv2fsDexrQGc28xf09BiEY2f7reOX_4sGMoVHZJcXED-HClDKjIBxjQcB-6SiEkx2BhyN4E6Q8vHLsEVkgI19sUuTp8wij0ARAIfXZJaRZudy26CF5nkuO4CFDjNLpRLDig_d36o_XjdXZiIzUfVxDnyYOLNwlpU-zK9Ts3CqWhgUFRpFW449C_iN22ergH0h6_Y5fruRkd9-5_JW4TSAecJL7qaNnXkRPw6q9kP8rkm9A91KV6djDxefjLXcQgqBlk07CtmOpP6SDPClzKhd89_MVSL3RIl9sqI4_ECe3sfGkCvjq8A0pqDivT43dlvYyXc0fVfH0xnJPoP7prZY4PVflVr9uCrPuqa8qfRWuajd7C85ljNeYqiIBPhRLnhWStCGxgUeXXIoy1AMNaK7KM3kq1ijyhyCoQ by RoaldKamman (@RoaldKamman) on CodePen