Pin Element issue

[Adesh]

I'm attempting to pin titles to the left bar. I tried everything but nothing worked.

Can you please help me in this?

I need to pin the first title at the top, the second title after the end of the first title, and the third title after the end of the second title. 

(Like Stack card)

See the Pen yLxJrzE by Adesh-Evince (@Adesh-Evince) on CodePen

[GreenSock]

I noticed a few problems: 

• You were using an endTrigger of ".collapse--group" but there was no such element
• If you want them to stack so that the 2nd one pins UNDER the first one, etc. (I hope I'm assuming correctly), you must offset their start value accordingly based on their height. For example, if they're all 50px tall, the first one would pin at 0, the second one at 50, the third at 100, etc.
• I don't think you want to unpin when that element's bottom hits the bottom of the viewport ("bottom bottom") - I assume you want it to unpin when the bottom of the last pinned element hits the bottom of that container section. 
• To make it responsive, you'd need to use function-based start/end values and do your recalculations of the offsets in a "resize" listener.
• There's an odd browser rounding issue that can cause your flexbox layout to wrap differently when you do pinning because ScrollTrigger gets the width from the browser which reports it in px, but you're using 40% and when the browser converts that to px it's rounding up which can make it about 1px too wide, causing the wrap. So I set a style in the CSS for the .pin-spacer so that it's forced to be 40%. 

Is this more like what you wanted?:

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

 

[Adesh]

Wow amazing ! It's work like as expected and it's really clear for me.
Ty @GreenSock you're the bests,  have a nice day