ScrollTrigger z-index issue

[newguy123]

I'm not sure if this is a GSAP issue, or simply a logic issue. Either way, I'm hoping somebody could help me solve the issue please.

 

I have a simple image sequence, with 4 titles coming up over time as you scrub scroll.  The #container z-index is a 2, to be above the canvas image sequence. However if I want to be able to have 1 of the titles, say title 2, behind the canvas, then that title's class of .below seems to do absolutely nothing, even if set to -9999.
If however I set the container's z-index to -9999, then ALL the titles do in fact go behind the canvas. But of course that doesnt solve the problem.

 

I also tried cheating, by setting each target's zIndex in the tl, but that also doesnt seem to do anything. It appears that anything inside the container, is linked to the container's z-index, which is a bit of a bummer of that is the case!

Any ideas?

 

See the Pen PoLvqRw by newguy123 (@newguy123) on CodePen

[Rodrigo]

40 minutes ago, newguy123 said:

It appears that anything inside the container, is linked to the container's z-index, which is a bit of a bummer of that is the case!

That's basically how HTML/CSS work, nothing to do with GSAP unfortunately. If the container of the texts container is above the canvas there is no way to put anything inside that container below the canvas element. The only way is to keep each text in the body tag with a fixed position and play with each text's z-index value, but again that is mostly an HTML/CSS thing rather than a GSAP one.

 

Hopefully this helps.

Happy Tweening!

[newguy123]

55 minutes ago, Rodrigo said:

That's basically how HTML/CSS work, nothing to do with GSAP unfortunately. If the container of the texts container is above the canvas there is no way to put anything inside that container below the canvas element. The only way is to keep each text in the body tag with a fixed position and play with each text's z-index value, but again that is mostly an HTML/CSS thing rather than a GSAP one.

 

Hopefully this helps.

Happy Tweening!

I took it out of the container as per your suggestion. I limited it to only 1 title for now and I managed to get it behind the canvas.
However I can't seem to make the TL work with that single title now as it just seems to be a rugalar scroll element now, it doesnt stick to it's position, and the TL I gave it seems to do nothing...

I would expect it to fade out from around frame 80

 

EDIT: here the codepen

See the Pen Babeogr by newguy123 (@newguy123) on CodePen

[mvaneijgen]

You pin #container, so only things inside container will pin. You either have to make this part of #container or use another element as the pin that contains everything you want to pin. 

[newguy123]

Just now, mvaneijgen said:

You pin #container, so only things inside container will pin. You either have to make this part of #container or use another element as the pin that contains everything you want to pin. 

herein lies the problem. If I make the text part of the container, then I CANT adjust different text element's z-index. I want some titles in front of the canvas, and other behind. Is there no way of doing this? Can't GSAP somehow adjust z-index inside a timeline, or perhaps using a flip in the timeline to adjust the z-index?

[mvaneijgen]

z-index only works on children relative to the parent. So of course you can do this, you just have to restructure your HTML to allow the functionality you want from the elements to be possible. You have to view a parent element as a paper page, and you can stack the elements how ever you like on that page, you just can't put the elements behind the current page or allow elements from other pages to be on top or below the page your currently on.

 

See the Pen mdoYEye?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

25 minutes ago, newguy123 said:

or perhaps using a flip in the timeline to adjust the z-index?

 

Yeah sounds like a good route to go down research Flip can reparent elements so that could be a smart solution. Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

The last demo you posted was never going to work because you didn't read my post carefully:

3 hours ago, Rodrigo said:

The only way is to keep each text in the body tag with a fixed position and play with each text's z-index value,

The key is fixed position, that takes the element out of the document flow. Again this is basic HTML/CSS  stuff every developer must know in order to create UIs in this business and not a GSAP related specific problem.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/position

 

Hopefully this clear things up.

Happy Tweening!

[newguy123]

59 minutes ago, Rodrigo said:

Hi,

 

The last demo you posted was never going to work because you didn't read my post carefully:

The key is fixed position, that takes the element out of the document flow. Again this is basic HTML/CSS  stuff every developer must know in order to create UIs in this business and not a GSAP related specific problem.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/position

 

Hopefully this clear things up.

Happy Tweening!

No things are not cleared up for me unfortunately. I was under the impression I did exactly what you asked. IE, I took the text out and stuck it directly in the body. Each id #section number position is fixed as you can see in the css. To make double sure, I've also set the the class of the one I'm targeting, to fixed. However, its not fixed for some odd reason.

 

EDIT: Ah I see what the problem was. I set the position as fixed, but then further down, in same tag, I set it to absolute, effectively overriding the 1st fixed.

It is fixed and also 'fixed' now LOL. Thanks for the hint!