How to mimic position: sticky; bottom: 0; on grid cards with ScrollTrigger and Pins

[Charlie Stevenson]

Hi All,

 

Just wondering how I would mimic css position sticky bottom, with the same behaviour as seen in my CodePen demo, using GSAP's ScrollTrigger.

I'm unable to have separate id's/classes as the content is pulling from a CMS and needs to be dynamic. 

 

Thanks in advance.

Charlie

See the Pen ExRxKRg by CharlieStevenson198 (@CharlieStevenson198) on CodePen

[mvaneijgen]

Something like this? They still need to be positioned correctly and you need to calculate all the values dynamically, but this looks like the way to go. Although I don't get why you would want to recreate a feature that works perfectly in CSS. 

 

See the Pen poKorWL?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[GreenSock]

Here's an alternative: 

See the Pen qBKBwBQ by GreenSock (@GreenSock) on CodePen