Kobe Posted August 17, 2022 Share Posted August 17, 2022 Hi, I'm developing a website using ScrollTrigger that needs a custom scroll container. I need to pin my animations inside the scroll container but for some reason the pinned elements don't pin properly and start shaking on scroll. I've made a minimal demo in CodePen to illustrate the problem. Any help will be greatly appreciated! See the Pen ExEbgxZ by KobeIndemans (@KobeIndemans) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 17, 2022 Share Posted August 17, 2022 Thanks for the clear demo. How's this behaving for you?https://cdpn.io/pen/debug/mdxadER Link to comment Share on other sites More sharing options...
Kobe Posted August 17, 2022 Author Share Posted August 17, 2022 Thank you for your answer, but the pinned element is still shaking. (tested on multiple browsers) Link to comment Share on other sites More sharing options...
GreenSock Posted August 18, 2022 Share Posted August 18, 2022 @Kobe which browsers and on which devices? Try adding pinType: "fixed" to your ScrollTrigger. Or set ScrollTrigger.normalizeScroll(true); 1 Link to comment Share on other sites More sharing options...
Kobe Posted August 18, 2022 Author Share Posted August 18, 2022 Thank you for your answer, I have tested the shaking demo on Firefox, Chrome and Safari on my Macbook Pro 14 (2021).pinType: "fixed" solves the shaking problem but results in a new problem as the custom scroller doesn't scroll the content when the cursor is on the pinned element. In this case the pinned element is a small red box, but in my project the animations are full screen (width and height of scroll container) making it impossible to scroll the content. I've again made a minimal demo of the problem to illustrate that it is impossible to scroll when the cursor is on the pinned red box. See the Pen VwXqEwE by KobeIndemans (@KobeIndemans) on CodePen The problem occurs on Chrome and Firefox, not on Safari. How can I solve this problem? ScrollTrigger.normalizeScroll(true); seems to disable the scroll completely, so didn't solve the problem either. Any help to solve this problem would be greatly appreciated! 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 18, 2022 Share Posted August 18, 2022 Heya! pointer-events: none or stopping propogation of wheel events is probably the route. See the Pen MWVZZLe?editors=1010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted August 19, 2022 Share Posted August 19, 2022 15 hours ago, Kobe said: ScrollTrigger.normalizeScroll(true); seems to disable the scroll completely, so didn't solve the problem either. Sorry, in your case since you're not using the regular <body> for scrolling (you've got a nested scroller), it'd be: ScrollTrigger.normalizeScroll({allowNestedScroll: true}) Link to comment Share on other sites More sharing options...
Kobe Posted August 19, 2022 Author Share Posted August 19, 2022 Thank you Cassie and Jack! pinType:"fixed" and pointer-events:none solve the problems outlined above. ScrollTrigger.normalizeScroll({allowNestedScroll: true}) allows indeed for nested scrolling but does not solve the shaking for me. I'm now using pinType:"fixed" for the shaking problem but with this setting I've encountered another problem. In my project I would like to downscale the custom scroller with its content. This worked well but by setting pinType: "fixed", the content disappears after scaling when it is pinned (fixed). When the content is not yet pinned, there is no problem (content is visible when downscaled). Is there a way to keep the pinned content visible after scaling? I've made a minimal demo to illustrate the problem: See the Pen abYXVNX by KobeIndemans (@KobeIndemans) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 20, 2022 Share Posted August 20, 2022 Heya! I mean... I wouldn't be scaling down the container that all the scrollTrigger calculation rely on. I feel like that's asking for trouble. Also that's just a limitation of how position fixed works - it doesn't work inside transformed containers. ScrollTrigger is great, but it's not magic and we still need to work within the limits that browsers give us! Could you scale down an inner div instead? That sounds like a more sensible approach. Link to comment Share on other sites More sharing options...
Kobe Posted August 24, 2022 Author Share Posted August 24, 2022 I would like to use it in a page navigation menu previewing the pages so scaling down the whole page will be the only option I think. I have developed the menu and everything (including the scrollTriggers) works fine. The only problem is that when pinType is not set, I have the shaking problem. When pinType is set to "fixed", this is solved but the scaling doesn't work properly. I don't know why the shaking of the pinned elements happens when pinType is not set with a custom scroller, but it looks like I need pinType:"fixed" when the menu is not open and pinType:"transform" when the menu is open. Is there maybe a possibility to change this property when I open the menu (shaking would not be a problem anymore when the menu is opened because the overflow is hidden) or to add CSS properties that change position fixed but doesn't let the pinned elements jump. Or is there maybe a whole other approach possible? Any help would be greatly appreciated! Link to comment Share on other sites More sharing options...
Cassie Posted August 24, 2022 Share Posted August 24, 2022 I'm finding it pretty hard to understand the whole picture here I'm afraid. Your demo above isn't working for me either. Maybe you updated it? Could you possibly put a demo together that shows all the moving parts you're struggling with and then comment it out or give a step by step explanation. Treat us like we're 5. I don't have the context in your head you do and we're juggling a lot of other questions so don't assume any carry over knowledge from a few days ago. Just give us a really clear demo, an explanation and steps to replicate the issue. Thanks so much! Link to comment Share on other sites More sharing options...
GreenSock Posted August 25, 2022 Share Posted August 25, 2022 Also, just to be clear, if an element is set to position: fixed inside a parent that has any transform whatsoever (event translate(0, 0)), the browser will treat that position: fixed element as though it's fixed to the parent itself rather than the viewport! That has absolutely nothing to do with GSAP. It's how the spec works. I definitely would not apply a transform to the parent of something you're pinning, but if you must then you should set pinType: "transform" instead so that it works properly. 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