ScrollTrigger pin broken by align-items display flex

[sprhnns]

Hi,

I'm having this issue – is there any thing I can do about it.
Seems like flex and align-items:center is breaking the scrolltrigger pin

 

I'm very happy for any help
 

See the Pen rNQxOyz by sprhnns (@sprhnns) on CodePen

[mvaneijgen]

Hi @sprhnns welcome to the forum!

 

What do you expect the result to be? To me this all seems to work fine. I do note that you're using some old GSAP/ScrollTrigger version, which is not recommended, but even on the new version this result seems logical to me, the element you want to pin pins as soon as the trigger element is met and stops pinning when the end is reached

 

Loading the following scripts in codepen will get you the latest version 

https://unpkg.co/gsap@3/dist/gsap.min.js

https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js

 

[GreenSock]

Yeah, like @mvaneijgen I don't see any problems at all. What are we missing? It seems to be doing exactly what you're asking it to do. 

[sprhnns]

Hello everyone!
Thank you very much for your thoughts on this one.

Indeed the issue here is not an issue 🙈. I was completely blind while trying to copy this thing to codepen.
Since it was "stuck" on the bottom, due to the start and alignment in the middle, I assumed this was the same problematic behavior that I was seeing in my local dev.
But as you said – it did exactly what it was supposed to do.

The problem though was something else.
I was initializing the scroller 2 times, didn't notice though. Once with an event listener 

document.addEventListener('readystatechange', (event) => {

and once just in a regular file.
For whatever reason, this did work just fine unless this flex align was on the outer container? The pinned item "jumps" or disappears to the end.

Actually in the codepen it's not even working at all when adding the event listener – so this is the issue
As seen here

See the Pen WNYrZwa by sprhnns (@sprhnns) on CodePen

Maybe you could explain this, but anyways – that was the problem.

Thank you!

[Cassie]

Heya!

 

If you pop some logs in you can see that that event fires twice, once before the DOM's loaded and once afterwards, so you're creating that scrollTrigger twice.

See the Pen VwVerVR?editors=1011 by GreenSock (@GreenSock) on CodePen