Issues with HorizontalLoop helper

[DevC]

Hi,

 

Experiencing some glitches with horizontalLoop helper. I have list items overlapping and popping in and out like image shown below. Just wondering if my implementation is off or if the helper is not quite the tool for this component. I attempted to use this at the most basic case, but still experiencing some issues. Thanks for any help.

See the Pen gOQggvx by dcha (@dcha) on CodePen

[Rodrigo]

Hi,

 

There two possible issues here.

 

The first is the most clear. You are creating a set of loops outside the scope of GSAP MatchMedia and then if the screen is bigger than 768px you are using the same variables to create the loops again. Also you're using the let keyword which is actually creating a new set of variables in the MatchMedia which will not replace the ones you already created. To know more read this:

https://www.freecodecamp.org/news/how-javascript-works-behind-the-scene-javascript-execution-context

 

Create a GSAP MatchMedia for smaller screens and then create a different one for larger screens in order to be 100% sure that any other GSAP instances related to the same targets are completely reverted and clear before creating new ones, that's the magic GSAP MatchMedia does.

 

The second issue is that you have to wait for your images to be completely loaded before creating the loops. Any change in the elements width can cause unexpected behaviour.

 

Also your images have fluid widths and your <li> elements have visible overflow plus this flex config is not helping as well: flex: 1 0 auto;

 

Finally there is an issue that I can't put my finger on right now when the loop instance is created with reversed: true, for that you have to clear the styles using clearProps in GSAP MatchMedia cleanup function.

 

Here is a fork of your codepen that seems to work:

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

 

Hopefully this helps.

Happy Tweening!

[DevC]

You rock! It's working great.

[DevC]

Future me - if you're selecting 2 siblings, make sure you're selecting the modifier class and not the base class that they share! 🤦‍♂️