ScrollTrigger | Bottom-aligned pinned column

[Alessandro Newzoo]

Hello guys, thank you so much for GSAP, it's been my go-to tool for years now and couldn't live without!

 

I'm trying to have the green column to stick during the whole height of the blue column, and it's almost all how I wanted it, except for the fact that end: bottom bottom doesn't actually match the bottom of the pinned element, but it stops way before reaching the end of the green column, leaving quite a lot of white space.

 

Unless I'm mistaken, the docs describe bottom bottom as 

Quote

when the bottom of the trigger hits the bottom of the endTrigger

 

so this is what I'd expect:

 

Please, what am I doing wrong?

Thanks!

See the Pen oNomRBp by solidpixel (@solidpixel) on CodePen

[akapowl]

Hello Alessandro - welcome to the GreenSock forums.

 

The first parameter of start/end stands for the trigger/endtrigger element, the second stands for the window/viewport.

 

So with the '.right' as the endTrigger and an end of 'bottom bottom' that would mean: "unpin when the bottom of .right hits the bottom of the window" - which it does.

 

If you want the bottoms of both elements to align when unpinning, you would have to calculate things a bit.

 

Something like these two different examples show:

 

See the Pen LYOqooJ by akapowl (@akapowl) on CodePen

 

See the Pen wvPNLwa by akapowl (@akapowl) on CodePen

 

[Alessandro Newzoo]

hi @akapowl wow that was quick, thank you for the prompt reply!

I can't believe I've been looking at the docs for hours today, and still didn't notice the scroller was actually the viewport 🤦‍♂️

 

Thank you so much, that's exactly what I needed, I wish you all the best!