Nickicool Posted November 17, 2020 Share Posted November 17, 2020 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 Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted November 17, 2020 Solution Share Posted November 17, 2020 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 1 Link to comment Share on other sites More sharing options...
Nickicool Posted November 18, 2020 Author Share Posted November 18, 2020 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". Link to comment Share on other sites More sharing options...
Nickicool Posted November 18, 2020 Author Share Posted November 18, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 18, 2020 Share Posted November 18, 2020 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now