How to toggle a class on the play and reverse a timeline animation?

[Nickicool]

There was a problem, as it seemed to me in a simple situation. I need to toggle the class for an entry in the "FAQ" list. Opening the answer to the question (by clicking) add a class, and collapsing the answer-remove the class. I couldn't do it. I tried several options - none of them works correctly (all attempts are commented out in the code). The problem is that the class is added / removed randomly after a few clicks on the question (and its neighbors).

See the Pen yLJrBaE by nickicool (@nickicool) on CodePen

[ZachSaucier]

Hey Nickicool. It's more efficient to create the animations at the start and just use control methods to control the animations. I talk more extensively about how to do that in my article about animating efficiently. Also keep in mind that onComplete only fires when the tween's progress is 1. If you want it to fire on reverse complete, use onReverseComplete.

 

Here's how I'd set it up instead:

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

[Nickicool]

15 hours ago, ZachSaucier said:

Hey Nickicool. It's more efficient to create the animations at the start and just use control methods to control the animations.

 

Thanks for the answer @ZachSaucier! Yes, I read aboute that the best way to create animations at the start, not during execution. But, what if the number of elements is large and not every one of them will be "opened/closed" (in the case of the FAQ)?

 

In my case, I don't see a problem with performance...

 

Maybe I don't see the "hidden dangers".

[Nickicool]

And every time I am amazed at how convenient and powerful GSAP is in work! But personally, I would be useful callback 'onReverse Start()' (which is called at the beginning of the reverse animation) which for some reason is not in the list of available. Is it possible to add this in future versions?

[ZachSaucier]

2 hours ago, Nickicool said:

what if the number of elements is large and not every one of them will be "opened/closed" (in the case of the FAQ)?

That's not an issue. 

 

2 hours ago, Nickicool said:

I don't see a problem with performance...

Standalone you might not see a difference. When you have other things going on in a page then you may or may not.

 

Regardless setting things up beforehand helps avoid other issues in your code. I highly recommend it.

 

2 hours ago, Nickicool said:

callback 'onReverse Start()'  ... Is it possible to add this in future versions?

Can you please provide a minimal demo (or multiple) of a situation where this would be useful? Most likely you can just run code when the .reverse() is called or something else to avoid the need for it. But we're always happy to consider adding things to the GSAP API if there's a really good reason to add it.