Position sticky with scrolltrigger

[krisxtina]

Hello. 
As you can see in demo I have titles, that are sticky on the top. But I can`t understand how to create sticky on bottom.

I want to see all 4 tabs on bottom, that start scrolling after each other. If I give a css style sticky, with scrolltrigger it works incorrect. Help me please. I use this example as reference 

See the Pen 9e7bf431223f98516c0431cfdefb6e3f by GreenSock (@GreenSock) on CodePen

 , but I really don`t understand how to do it in my codepen. 

Thank you!

See the Pen YzaMgBK by krisxtina (@krisxtina) on CodePen

[GSAP Helper]

This seems like it would be doable (if I understand your goal correctly), but we just don't have the resources to plan that custom effect out and build it for you. It's not a trivial thing (at least from what I can think of right now). Maybe try setting up those "tabs" at the bottom in the correct position, and use a ScrollTrigger with the start set to 0 and the end set to when the associated trigger element reaches the desired spot in the viewport (you could probably use getBoundingClientRect() to calculate that based on what the "top" is for the tab element). 

 

Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly.