Pin text from top to bottom inside ScrollSmoother content

[Akamiaxx]

Hello GSAP Community,

I am trying out ScrollSmoother with ScrollTrigger and I would like to have my title to be "pinned" at the center of the page while scrolling, from to to bottom. 
The problem is that I get a weird spacing below my page content, when I am using the pin option with ScrollTrigger. Tried to set the pinSpacing to false but I still get an extra plus spacing.

Here are screenshots of what I get (first) and what I am expecting (second) :

You can also find the demo on codesandbox here : https://codesandbox.io/s/bold-shadow-in3nnw
 

Thank you!

See the Pen by s (@s) on CodePen

[GreenSock]

If you just want that element to be position: fixed, all you need to do is put that outside the wrapper, as indicated in the docs: 

https://codesandbox.io/s/inspiring-waterfall-jboyuk?file=/index.html

 

Is that what you wanted? 

[Akamiaxx]

@GreenSock No I don't want to move it outside ouf the wrapper. Indeed by moving it outside it fixes the problem, but I thought there was a solution to with the pin property {mentioned in the documentation) to have the element at the same position while scrolling. 

[GreenSock]

Then just set position: absolute on your cover element: 

https://codesandbox.io/s/affectionate-tereshkova-cnfoc4?file=/src/index.js

 

The problem is that when you pin an element, it has to wrap it in an element that has position: relative in order to do proper positioning and prop things open in the layout, but you're using position: fixed so when that gets overridden, that element goes into the document flow (taking up space) and that's the extra space you see at the bottom. Setting it to position: absolute takes it out of the document flow. 

[Akamiaxx]

Indeed you are right, thank you!