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
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
ScrollTrigger pin broken by align-items display flex
in GSAP
Posted
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
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!