Make a GSAP timeline active and Inactive when clicking other items

[celli]

Hi,

 

I am trying to figure out two things on my codePen link.

 

1. When you click a dot, it scales down to 2 -- but I am trying to figure out how to make that dot inactive, so that the mouseover and mouseout functions would not run on that specific dot while it is active.

2. The line and date animations can still run now (even if the item is active), but I am trying to figure out how to limit the GSAP animations to run only if the item is inactive

See the Pen MMwpjx by celli (@celli) on CodePen

[PointC]

Hey @celli 

 

Have you looked at jQuery's off() method?

 

http://api.jquery.com/off/

 

 

[celli]

Hey PointC !

 

Thanks for responding 

 

I was trying to avoid jQuery, even though I am using it in this example I was going to try and convert those instances without using jQuery, if possible.

 

I thought maybe there was a way to play the GSAP instances once, and then reset them when the item is inactive again.

 

If you think the jQuery on and off methods would be the way to go, then maybe I'll keep it while using jQuery, but how would I integrate that into my GSAP timelines?

[PointC]

Oh, I only suggested .off() because your example used jQuery. I personally skip jQuery on most projects. 

 

For a vanilla approach you could loop through and add the mouseenter/leave listeners and then just remove them while a particular dot is active. 

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener 

 

 

 

 

[celli]

Thanks PointC ! I will try this and reply back when it is working.

[celli]

I am having some trouble with adding and removing the addEventListener, it says it can't read a property of a null.

 

This is not GSAP related, so I can keep trying to see what works

[PointC]

I can take a peek for you. Is there a new demo?

[celli]

Thanks PointC! Here is a codePen: 

[PointC]

Yeah, addEventListener isn't gonna work with a jQuery object like that. 

 

Here's a quick starter demo to loop through a node list and add a click listener without any jQuery involved.

See the Pen bPVeNd by PointC (@PointC) on CodePen

 

Does that make sense? 

 

Happy  tweening.