Batch and DrawSVG together

[Stefano Monteiro]

I am struggling to have the drawSVG working with ScrollTrigger batch().  Basically I will have multiple svgs on the page that will be draw triggered by ScrollTrigger, so far so good. However there is a section where multiple svgs will be trigger simultaneously and I want to add a stagger effect on them.

 

First question: Do I need to set up batch() to achieve this, or just ScrollTrigger is enough? (first pen)

 

Secondly, In the second pen I sort of managed to achieve the effect. However, the animation is being triggered whenever any other svg on the page is triggered. I tried using forEach loop either wrapping the ScrollTrigger.batch() or inside the onEnter (both codes are commented out), but none worked.

 

Also, I could not figure out why the svg are showing before the animation. I do have them as visibility: hidden on css

 

Thanks

 

 

 

See the Pen YzNbKxq?editors=0010 by stefanomonteiro (@stefanomonteiro) on CodePen

 

 

 

See the Pen RwKmNqw?editors=0010 by stefanomonteiro (@stefanomonteiro) on CodePen

[Rodrigo]

Hi,

 

In the first codepen each number it's inside a different <svg> tag, therefore when you loop through each SVG container, you're basically looping through each number at a time. Based on your code you should add all three numbers in the same <svg> tag and add the data-stagger attribute to them. Another option is to give those particular svg elements a unique class in order to loop through them independently from the rest and add a stagger based on the index value of the current iteration.

 

Finally, as I understand that it might take longer and not be the most elegant solution, in cases like this I prefer to create my animations for each section in their own code block. Sure, creating a single loop for everything is simpler and shorter, but as you already found out, it comes with a few drawbacks. Since you have some similar sections (the wavy line) you can loop through those, but for the rest my advice is to create an independent code block for each.

 

Happy Tweening!!!

[Stefano Monteiro]

Hi Rodrigo, 

 

Thanks for replying. I did split the code and set the batch function only for the numbers (elements that need the batch), and applied normal scrolltrigger on the other svgs.

 

See the Pen poRmBwE?editors=0010 by stefanomonteiro (@stefanomonteiro) on CodePen

 

Few things I am not happy though,

 

1 - the numbers (batch elements) are visible before the scrolltrigger start position;

2 - the animation happens every time the elements enter the screen (start position), anyway to disable it once animation is completed?

3 - sometimes the third svg (# three) animates from the beginning with # one;

4 - if I scroll back up (above the start position) and back in before animation is finished, the next animation will stop at the same point I entered back.

 

See video:

[Stefano Monteiro]

@Carl 

@GreenSock

 

Or anyone else, can I have some insights on the above please. Hugely appreciated.

[GreenSock]

Answered in your other thread: 

👍