Jump to content


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

Go to solution Solved by OSUblake,

Recommended Posts

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.



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

Link to comment
Share on other sites

  • Solution

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


  • Like 2
Link to comment
Share on other sites

Hi Blake,


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


Really appreciate it,




  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.