Assistance Needed - Issue with the pin-spacer div generated when using the ScrollTrigger with the property pin : true

[N3O]

Hi !

 I am reaching out to seek assistance with a challenge I'm facing while using ScrollTrigger, particularly with the property pin: true.

 

Problem Description:
When utilizing pin: true, the ScrollTrigger generates a pin-spacer div. However, I've noticed that this generated div has a z-index value set to 'auto.' This is causing interference with certain parts of my code, preventing them from functioning as expected.

 

I would appreciate your guidance on how to resolve or work around this issue. Specifically, I am looking for a way to adjust the z-index value of the pin-spacer div generated by ScrollTrigger when using pin: true.

 

I appreciate your time and support in helping me overcome this challenge. If there are any additional details required, or if you need any extensive code snippet, please let me know.

 

Thank you for your assistance.

[Rodrigo]

Hi @N3O and welcome to the GSAP forums!

 

Is really hard for us to debug without a minimal demo, please take a look at this page in order to learn how to create one:

 

Based solely on the description you provide the only advice I can give you is to add position relative to the other elements and see if that helps.

 

Happy Tweening!

[GreenSock]

ScrollTrigger has to create that wrapper element in order to prop things open and keep them from collapsing when the pinned element shifts to position: fixed, and it uses the same z-index you had set on the pinned element itself, so I'm not sure why it'd cause any issues for you. But you can actually create your OWN pinSpacer element wrapper and tell ScrollTrigger to use that instead (rather than it creating a new <div>) by passing it to the pinSpacer special property. 

...
scrollTrigger: {
  pinSpacer: yourWrapperElement,
  ...
}

See the docs