pin ScrollTrigger without spacer

[Khuong Tran]

Hi everyone! I'm new to gsap, can I ask how to pin the horizontal scroller on top of the page without the spacer at the bottom? Like the div below should stay right below the scroller until the horizontal scroller hit it's end then everything should be scrolled vertically.  Please open codepen in new window to understand better. Thank you!

See the Pen NWJxeBM by khuongtp (@khuongtp) on CodePen

[GreenSock]

Welcome to the forums, @Khuong Tran

 

You can just wrap it all in a container <div> and pin that instead: 

See the Pen ZEPQwNp?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Is that what you wanted? 

[Khuong Tran]

Thanks for your help. That could work but now I see another problem that is position sticky is not working properly

See the Pen bGZEZGb by khuongtp (@khuongtp) on CodePen

[GreenSock]

Yeah, that's clearly a browser thing - I'd recommend just using ScrollTrigger to do that pinning like: 

See the Pen PoLZLOo?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Does that help?

[Khuong Tran]

Hurray! Thank you so much! But there is one more thing, you can see that the height of the sticky part (orange background) is calculated incorrectly 

[GreenSock]

Yeah, that has to do with the fact that you've got display: flex on the parent which causes height/width to get handled very differently by the browser. I updated the CodePen to add a fix for that using an onRefresh(). 

See the Pen PoLZLOo?editors=0010 by GreenSock (@GreenSock) on CodePen

[Khuong Tran]

Thank you so much for your help! 💯Wish you a beautiful day