inteltone Posted October 16, 2023 Share Posted October 16, 2023 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted October 16, 2023 Solution Share Posted October 16, 2023 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. 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? Link to comment Share on other sites More sharing options...
inteltone Posted October 17, 2023 Author Share Posted October 17, 2023 Jack, thanks a lot for your help! Both problems are solved. I really appreciate your quick response and a very detailed explanation. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now