Just got started, confused about the layered pinning

[eravulgaris]

Hi all,

I'm just getting started with ScrollTrigger (and GSAP), so I'm sorry for the noob question.
 

As you can see in the Codepen I've created a section underneath all the panels (.test), but for some reason it sits underneath all the gsap panels.

I've set this new element as an endTrigger and the end is at the top of this element, yet it just gets overlayed. 
 

Any idea what I'm doing wrong?

 

Thanks in advance!

See the Pen bGMPGdg by jvlvl-z (@jvlvl-z) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo. ScrollTrigger and pinning can be a challenge to wrap your head around.

 

If I understand correctly, you don't want the 4th panel (green) to be pinned and the test section should just animate up with it.

 

If so, I used a condition inside your loop to not create a ScrollTrigger for the last panel. 

 

See the Pen yLjdLvq by snorkltv (@snorkltv) on CodePen

 

Edit: I removed the 100vh height from .test just to verify that no extra spacing was being added by pinning or whatever. 

[akapowl]

 

Hello there!

 

1 hour ago, eravulgaris said:

but for some reason it sits underneath all the gsap panels.

 

That's just related to how browsers work. ScrollTrigger's pin-spacer, which is wrapping every element you are pinning, gets a z-index: auto applied inline there. Since your last section doesn't have any z-index specified, the browser will automatically put it 'behind' any element that has any z-index applied, even if it is just auto, thus it is 'behind' all the pinned sections.

 

So to make your last section visible (as in appear above the other sections), just put a z-index on it, even if it is just auto (of course do that alongside a position property, or else the z-index won't have an effect).

 

Edit:

I've got to row back a bit - what I wrote above was how I had it in mind, but it actually isn't 100% correct.

 

z-index: auto is default for every element, so it will also be there for your last section - what actually makes the difference is that you don't have a position set on your last section and the z-index will only have an effect on elements that have a position specified (or flex items; elements that are direct children of display: flex elements).

 

So to correct myself again; simply set a position for your last section.

 

See the Pen abGgzjB by akapowl (@akapowl) on CodePen

 

 

 

Here it is simplified down; toggle the position: absolute of the circle on/off to see the difference it makes.

 

See the Pen zYjVxPr by akapowl (@akapowl) on CodePen