Accordion causing problems with Scroll Trigger due to page height changing...

[Shaun09075]

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!

See the Pen vYdNLwP?editors=1111 by shaun-will (@shaun-will) on CodePen

[OSUblake]

Hi Shaun,

 

I would keep everything scoped inside a function, kind of like this. And I would also use fromTo animations just to make sure you don't into any from logic issues.

 

See the Pen xxYwOBE by GreenSock (@GreenSock) on CodePen

 

[Shaun09075]

Hi Blake,

 

That's awesome, thanks so much for your help! 

 

Really appreciate it,

 

Regards