Multiple marquees on same page - horizontalLoop

[Valerie]

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

[Toso]

 

 

 

 

[Rodrigo]

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!

[Valerie]

@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 ?

 

[Rodrigo]

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!