DrawSVG forEach not working as expected

[chailandau 4 Likes (Newbie)]

I was trying to create a minimal demo for a different issue I'm having but I can't even seem to get the demo working. It works locally on my machine with a similar setup, so I'm not sure what's wrong. Once I solve this I can continue onto the original problem.

 

The problem here is that I want to do a forEach loop and have all my SVG shapes draw in on scroll via ScrollTrigger, and its not working at all.

See the Pen dydNwVL by chailandau (@chailandau) on CodePen

[PointC 14,017 Likes (Superhero)]

Hi @chailandau 

 

The problem is you're drawing to true, but the lines are already drawn so it looks like nothing is happening. You could set all the paths to 0 or use a from tween as I've done in this fork.

 

See the Pen c7c885cb4d645c1560429fc7574fd3e8 by PointC (@PointC) on CodePen

 

Happy tweening.

 

[chailandau 4 Likes (Newbie)]

Ah ok, thank you! I had it a part of a much bigger function and forgot I had originally set the DrawSVG values to 0, that fixed it

Ok, so here you can see my actual problem. I want to be able to apply this DrawSVG affect in a ForEach loop, but I am having difficulties pausing it in one. I have a central pause button and I want to be able to just hit pause and access all of my instances in an array. I am having success adding an ID and pushing it to the array, but can't seem to figure out how to successfully pause. I tried using a timeline in the loop vs just a tween and didn't have much luck. It seems to sometimes pause once but then it won't play again, or similar issues where I can't get it consistent.

 

I can't use the global timeline because on my project I am using ScrollSmoother and that pauses everything. What am I missing? I also tried adding it to a master timeline, but then all the animations seemed to play at once as opposed to using ScrollTrigger. 

The behavior I want is similar to the global timeline where EVERYTHING pauses and then starts again based on the pause() and play() functions, but I want to be able to choose what it targets, hence the array.

 

See the Pen dydNwVL?editors=1111 by chailandau (@chailandau) on CodePen

[PointC 14,017 Likes (Superhero)]

So you want all the lines triggered by ScrollTrigger but also want a pause control? Do I understand that correctly?

[chailandau 4 Likes (Newbie)]

Yes! I initially had a global timeline that paused and that was the exact behavior I want. For example if it's paused and you scroll, I don't want new lines coming in and I want the current line paused mid-draw if applicable. If it's unpaused and you scroll, I do want them coming in.

[PointC 14,017 Likes (Superhero)]

I see. I think it would just be a matter of disabling or enabling the ScrollTriggers with your control button. Something like this should work.

 

See the Pen 3cdce484c18fcfc71a262b3dd83e8a54 by PointC (@PointC) on CodePen

 

Happy tweening.

 

[chailandau 4 Likes (Newbie)]

Perfect! I didn't realize I had to also pause ScrollTrigger, but that makes sense. Thanks a bunch