Hey guys,
I've been hacking away at this for some time and I'm really stuck.
I have achieved most of what I want, but the pinned element won't stick to the top of the viewport.
Some things that I've noticed:
If I scroll to the position where my trigger and start position are on the same pixel, and refresh, then scroll down, the .purple div will be at the top of the viewport
If start at the top of the screen where my initial scrolltrigger is around 500px from the start trigger, then scroll down to the start trigger, the .purple top position will be -500px
I've tried to set fixed, absolute, height: 100vh, 100%, and top: 0; bottom: 0;
Some questions I've got:
Is there a way to set what an element pins to, instead of it pinning to the trigger?
Why is the offset of the trigger and start point adding +/- top values to the pinned section?
Does ScrollSmoother help solve this?
Thanks in advance for any help! Going to keep trying now :]