Jump to content
Search Community

DrawSVG forEach not working as expected

chailandau test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

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.
×
×
  • Create New...