How to play and pause tween when class is added to element? It looks like I'm very bad at googling

[kohlej]

I'm aware that this is not Greensock question but I really tried to look for answer everywhere.

1) I made a tween which is paused.
2) I want to play the tween or play it in reverse when class is added to HTML element. 

I use vanilla JS, so I'm not looking for jQuery solution. 

Thank you

[ZachSaucier]

Hey kohlej.

 

Some JS code has to run in order to add the class to the element, likely a function of some sort. You should just fire the tween when that JS runs (if it runs in a function then you call tween.play() or .reverse() inside of that function).

 

Technically you could also do this using mutation observers but that's almost always less preferable to just adding JS where the class is added.

[kohlej]

On 7/22/2020 at 12:05 AM, ZachSaucier said:

Hey kohlej.

 

Some JS code has to run in order to add the class to the element, likely a function of some sort. You should just fire the tween when that JS runs (if it runs in a function then you call tween.play() or .reverse() inside of that function).

 

Technically you could also do this using mutation observers but that's almost always less preferable to just adding JS where the class is added.

Hi Zach.

Yes I thought of that, but the class gets added and removed randomly, so I couldnt use event listeners like click, mouseover etc...So was wondering if there was any listener that can be added to element to watch for class change. 

I guess mutation observer will work, but I will have to rethink this whole thing. 

Thanks!

[ZachSaucier]

1 minute ago, kohlej said:

the class gets added and removed randomly

It can't be literally random. Something has to be calling it. Use that method. It's much preferable to using mutation observers.