Hello all,
I have several SVG paths within an accordion that I'm trying to animate. The accordion goes from display "none" to display "block" when clicked on. I realise that there is a problem with this because the trigger start and end positions don't exist in the DOM before the accordion is opened.
So I wrapped the gsap.timeline() in a function that is called when the accordion is clicked on and that kind of works.. 2 or 3 times before it blows up.
So the user clicks the accordion, which adds an "active" class to that accordion. My function then checks if there is an active class, and based on that creates the gsap.timeline(). The check on the active class was to stop the gsap.timeline() being created, even when the accordion is clicked on a second time in order to close it. All is fine up until here.
However, when I open and close the accordion 2 or 3 times, my code explodes and the animation stops working. I guess this is because the gsap.timeline() is being created each time the accordion is opened? To try and solve this, I added an else statement, trying to kill() the timeline when the accordion is being closed. However, this doesn't seem to work. In the console I'm getting a ReferenceError. It's like it can't find the timeline? Is this a scope problem with the way my code is written?
I've created a quick CodePen showing the problem.
As always, any help would be greatly appreciated.
Cheers!