Andell

Hello Jack. you are right, no need to panic lol. The difference was not because of the document.querySelectorAll in place of the gsap.utils.toArray The major thing that cleared up stuff was the declaration of the boxes array inside the forEach instead of outside it. At the point of this morning I did not know why it worked, but as you can see Zach already cleared up both points, and now its clearer.

Hello mvaneigen This second solution is excellent, I implemented it in the real life scenario and it works. Thank you for being a life saver. I hope this would help someone in a similar situation. By bringing the boxes array inside the forEach and querySelectorAll to find them instead of gsap.utils.toArray fixed the jumpiness you see in the first solution. I do not know why, but I am thankful for it. Thank you for your time man.

Hello mvaneigen First of all, thank you for your reply. It is making think of new solutions. Sorry if my explanation was not thorough enough here is a bit more explanation. So this code pen is a simplified version of the real problem of course. Think of the [red][blue] squares with a class of `.image__box-200` as one component, in which the red and blue squares should be staggered. We then have a CMS, which allows the user to add as many of these [red][blue] square components as they wish. I adapted the forEach codepen example above to add a second instance of [red][blue] squares contained in a box-wrapper. Hopefully this explains and illustrates the problem at hand a little clearer. Are you saying I should set the trigger inside scrollTrigger to be the box-wrapper ?

Without the forEach loop, the blue and red boxes with the same class are staggered correctly. https://codepen.io/Andell/pen/JjbYodo However I have the use case where I have multiple box wrappers on a page containing images with the same classes: Therefore I need to put them into an array using gsap.utils.toArray and doing a forEach on them. However inside this forEach, the stagger does not work, and both boxes are translated along the y axis simultaneously. See second code pen https://codepen.io/Andell/pen/poNjvNq Can anyone please shed some light on this?