Shaun09075

Hi Blake, That's awesome, thanks so much for your help! Really appreciate it, Regards

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!

Hi everyone, thank you for your replies! @PointC Wow, that's brilliant. I hadn't seen that before, but glad you've pointed it out to me. Thank you. I'm doing a similar thing, I guess. (Albeit a lot less complicated). Cheers!

Hi Blake, Thanks for getting back to me. That's a great example, thank you. I think I could have some design issues though if the SVG container is moving, as its position in relation to the elements behind it are important to the project in question. The project as it stands as 11 SVG paths that are animated throughout the site, going from top to bottom. They weave over and behind other elements. Some of them work perfectly, and some of them don't. I'm wondering if it's the shorter SVGs that are more manageable. Kind regards, Shaun

Hello everyone, So I'm animating an SVG path, however I believe the animation is going too quickly and so the user only sees the very beginning and end of the line being drawn. I would like the end of the SVG path to always be in the centre of the screen, so that the user can see it being drawn. I've tried adjusting the trigger start and end points with no luck. I've also tried adjusting the duration with no luck. Any help would be greatly appreciated, Thanks, Shaun

Hello, Quick question really, probably quite simple but I'm new here. I was wondering if it's possible to have the same effect that we get with the horizontal snapping sections (advanced) demo - but vertical rather than horizontal? Kind regards, Shaun