Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Stefano Monteiro

Batch and DrawSVG together

Go to solution Solved by Rodrigo,

Recommended Posts

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






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




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

Link to comment
Share on other sites

  • Solution



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!!!

Link to comment
Share on other sites

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:

Link to comment
Share on other sites

Answered in your other thread: 


  • 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.