Valerie Posted February 16 Share Posted February 16 Hello, I'm looking to add multiple horizontal marquee's on a single page, and the number of images in each marquee could differ. In the example pen, it's like the count from the second .wrapper is effecting the first .wrapper. Ideally the each of the wrappers animation would behave like in See the Pen LYaNjOP by GreenSock (@GreenSock) on CodePen , regardless if they have a different number of images. what is the best approach to modify to achieve forEach behavior? See the Pen poYGKwL?editors=1010 by vyeltman (@vyeltman) on CodePen Link to comment Share on other sites More sharing options...
Toso Posted February 16 Share Posted February 16 Link to comment Share on other sites More sharing options...
Rodrigo Posted February 16 Share Posted February 16 Hi, The issue is that you have two different sets of elements and you're running this: const boxes = gsap.utils.toArray(".box"); That basically gets ALL the elements with that class in the entire DOM, so is just one loop for the elements in both wrappers, that's what causes the erratic behaviour. The helper function is expecting just the elements (regardless of the amount) of a single set and you have two sets. The solution is to get both sets of boxes separately and create a loop instance for each: const boxesOne = gsap.utils.toArray(".first .box"); const boxesTwo = gsap.utils.toArray(".second .box"); gsap.set([boxesOne, boxesTwo], { backgroundColor: gsap.utils.wrap(colors) }); const loopOne = horizontalLoop(boxesOne, { paused: false, repeat: -1, reversed: true, speed: 1.25 }); const loopTwo = horizontalLoop(boxesTwo, { paused: false, repeat: -1, reversed: true, speed: 1.25 }); Here is a fork of your demo: See the Pen xxBMyOM by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Valerie Posted February 16 Author Share Posted February 16 @Rodrigo What if there are an unknown amount of .wrapper's ? For example, what if there was a "wrapper third", is there a way to modify forEach rather than specifying a new const = boxThree ? Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted February 16 Solution Share Posted February 16 Just create a loop: const wrappers = gsap.utils.toArray(".wrapper"); wrappers.forEach((wrapper) => { // Second parameter is the scope so only the elements // with the box class inside the specific wrapper element const boxes = gsap.utils.toArray(".box", wrapper); const loop = horizontalLoop(boxes, { ... }); }); That should work for an unknown number of wrapper elements in a dynamic way. Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now