Enable/Disable animation based on isTweening

[ektorp]

Hi - I simply want to set an animation based on whether or not it is currently animating. I see GSAP's isTweening but it does not seem to be working as expected. In my simple CodePen example, I simply want to click the button and then show the box, and then click anywhere on the document or page, to then hide or fade out the box. If you click the button super fast multiple times it does then seem to work. So I think there is some basic step in this simple request that I am missing. Any help would be greatly appreciated.

See the Pen ZEvVweM by pen (@pen) on CodePen

[GreenSock]

This has to do with event bubbling. A click on the "#show" button IS a click on the document. If you put a console.log() inside each event handler, you'll see that when you click on the "show box" button it triggers BOTH event handlers. That has nothing to do with GSAP - it's just a logic thing in your code. 

 

There are a lot of ways you could do this. Here's just one: 

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

 

Does that help? 

[ektorp]

Thanks Jack. I completely missed the event bubbling with this. It makes perfect sense. Thanks for the simple explanation and example solution.