GSAP seamplessLoop helper function with flexible width elements and active class on active element.

[DW92]

Hi. I'm trying to utilize helper function "seamlessLoop".

I'm trying to use this example: , but have some problems, with that:

1. When I use  const boxes = gsap.utils.toArray(".box"); and passing that constant to horizontalLoop() function, this happens:

but when I pass html selectors directly '.js--pelion-reviews-tape .wrapper .box' it works fine as a loop/marquee.

The problem I get here is that onChange method doesn't work (doesn't add and remove "active" class).

Here is my code:

See the Pen oNVRqJb by DW922 (@DW922) on CodePen

The only thing I want to achieve here is to have a "marquee", with "active" (center I guess) element highlighted.
 

 

Thanks for all your help

See the Pen gOvvJee by GreenSock (@GreenSock) on CodePen

[Toso]

h1 @DW92  maybe something like 🤔

 

this one without any functions 

See the Pen PoLvaKM?editors=1010 by ahmed-attia (@ahmed-attia) on CodePen

 

 

in your demo, you didn't load gsap so this code won't work in a million years 😂

 

 

here is how you load gsap

 

 

 

or just fork this demo it contains all the plugins 

 

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

[DW92]

Hi @Toso Thanks for your help!

I'm just showcasing this code on codepen. Testing it on my local enviroment, so I'm sure gsap is working just fine (with problems I mentioned).

Is it possible to make "slides" jump, one after another, instead of smooth movement, in your example?

[Toso]

something like? 

 

i created a setInterval and it fires every 2s you can play with the duration and ease to get the effect you want 

 

See the Pen KKELGWz?editors=0010 by ahmed-attia (@ahmed-attia) on CodePen

[DW92]

@Toso Great! What a Wizzard!

Thanks a lot!