ScrollTrigger and Draggable - possible conflict

[inteltone]

Hi!

I can't figure out how to solve two problems. 

1. I use ScrollTrigger to pin top elements of each section during scrolling. Everything is ok until the window width is less than 600px or something. Top elements kind of jump out from their container.

2. If I turn on Draggable then ScrollTrigger works incorrectly at all. It looks like there is a conflict between ScrollTrigger and Draggable.

Thanks in advance for your help!

See the Pen vYvwMMM?editors=0011 by inteltone (@inteltone) on CodePen

[GreenSock]

1. That's actually a CSS-related thing with how browsers handle stacking contexts and it's rather confusing. Technically that should be clipping but at least some browsers act differently when the element has position: fixed inside an ancestor that doesn't have any transforms or will-change: transform on it. So to work around that, you can set will-change: transform or a transform on the container, and then set pinType: "transform" on your ScrollTrigger to prevent it from using position: fixed. 
2. Same kind of issue - when you drag an element, you're applying a transform which then kicks it into a new stacking context layer in the browser. 

 

See the Pen LYMKNwY?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Better? 

[inteltone]

Jack, thanks a lot for your help! Both problems are solved. I really appreciate your quick response and a very detailed explanation.