Pinned element on scroll related to another pin element

[BeatlesBOB]

Hello Everyone, I'm trying to pin right section when It touch the top of viewport but when I try by using another Scrolltrigger it make things a bit shaky and break the other effect.

See the Pen NWMKgPL by beatlesbob (@beatlesbob) on CodePen

[GSAP Helper]

Hi there!

Apologies for the lack of response so far, but it looks like likely that people are struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here's some tips that will increase your chance of getting a solid answer!
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue including device if possible - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

 

 

[BeatlesBOB]

Maybe the expected result wasn't clear, So when we are inside a new category (when the left element change the title) I want the right list to be pinned for exemple 300px. As You can see inside my codepen I have a scrolltrigger that for me should do the trick but when I uncomment it, it make the right list shakky when touch the top and it doesn't pinned well. Any idea to make this work as intended ?

[GSAP Helper]

I'm having a hard time seeing the issue. you're only pinning it for 10% of the height of the trigger, so that's only a few pixels. Might not be enough to even notice much. Didn't you want that to be 300px, like this?:

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

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here is my list of requirements, please build it or fix my demo" tutorials. If you still need some help, I'd strongly recommend reducing the demo down even more so that you just have a few colored <div> elements and a super simple animation to keep things focused and clear.