Horizontal Loop Helper function Z-index not on the same level

[I_dont_know]

Hello !

I'm quite new here so I hope it's a Gsap related problem and not just logic on my end.

I'm using an Helper function called horizontalLoop() and i use it to display text like a marquee that can be dragged and scrolled, the problem I have is that even if I change the Z index of my text the text is not on the same level which make it hard to add other content that go behind some element. I cant provide a demo but on the screenshot I hope you can see the problem. If the author of the function know the cause of this or someone else.

Thanks in advance if you try to help me !

.

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[I_dont_know]

I did a demo 

See the Pen jOeaLag by Niesmer (@Niesmer) on CodePen

 You can see if you look in 3D view that the problem is already here i'm guessing it come from the helper function (which is still great because i dont have the knowledge to make one yet). Hope this help !

[Rodrigo]

Hi,

 

The helper function does offer a series of config options. In this case the paddingRight option:

let loop = horizontalLoop(".item", { repeat : -1, paddingRight: 30 });

That seems to solve the problem in your codepen example.

 

Hopefully this helps.

Happy Tweening!

[I_dont_know]

Thanks for the answer, but i tried ur soluce and found that the problem was still here because this is the 3d view i get and i know that at a point one element will go over the other if I add an image (which is the final goal but my pen is minimal just to showcase the problem). I dont know if a solution using Gsap can be used maybe i will have to try to do it in another way 😓.

[GreenSock]

@I_dont_know if you'd like more help, please make sure you provide a minimal demo that clearly illustrates the problem and we'd be happy to answer any GSAP-specific questions. The helper function is just intended to help folks - it's not something we "officially" support. If there are any obvious flaws, though, I'd like to resolve those. It's not made to be 3D, just so you know. 

[I_dont_know]

Ok my bad i did change the demo that i sent previewsly

See the Pen jOeaLag by Niesmer (@Niesmer) on CodePen

Do you have a list of things i can check and fiddle with because i won't ask you to do it for me.

Thanks a lot already for trying to help me

[GreenSock]

You put the paddingRight in the wrong spot. That's a feature for the horizontalLoop() helper function, but you put it inside a separate tween. 

See the Pen eYPeENY?editors=1010 by GreenSock (@GreenSock) on CodePen

[I_dont_know]

Ok sorry getting confused with codepen and Gsap excuse me.

I improved the demo to showcase what i try to explain with only text and the problem is still here.

See the Pen BaqwYJL by Niesmer (@Niesmer) on CodePen

 

So the problem i get is that when you hover on the last project 10 (the last one of my item) it goes over project 1 which is what i'd like to avoird i wanted the image to go underneath all my link I hope i'm explaining myself and sorry for being slow.

[GreenSock]

If I understand you correctly, that's a logic issue - you want the next one to the right to always have a higher z-index value, but you're looping around so that the first one comes after the last one. So 10 must be higher than 9...and 1 must be higher than 10? 

 

Two ways I can think of to solve it is to add set() calls to the resulting horizontalLoop() timeline so that the zIndex values shift at the appropriate spots, -OR- you could just add logic to your mouseenter handler so that at that point it sets the next element's zIndex to a higher value, and maybe on mouseleave revert it. 

[I_dont_know]

Your right sorry i don't have the knowledge to fix this so I will forget this. Thank you for your help and have a nice day.

 

Merci.