Element changes position with pin: true

[DMT82]

Hi,

Im trying to pin the header until it comes to an end, and after the pinning comes to scroller-end, i want it to start to fade away with opacity: 0.
But when I add pin: true or pin: "#header-text", the whole header changes positin from center of the site to top left.
Why do it change position and how can I start another animation/fade when the pinning comes to an end?


Thank you.

See the Pen rNezqbe by DMT82 (@DMT82) on CodePen.

[mvaneijgen]

I think GSAP doesnt know what to do with CSS Grid. Pining an element is just setting it `postion` to `fixed` with some other magic. I've changed your CSS Grid to use flexbox and than it does stay in the middle. 

 

See the Pen eYZEbKP by mvaneijgen (@mvaneijgen) on CodePen.

[DMT82]

Thank you so much.
So the problem here is between GSAP, ScrollTrigger & CSS Grid?
Will check the code soon and see what you have done.

Thank you once again.