Kobe

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!

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: https://codepen.io/KobeIndemans/pen/abYXVNX

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. https://codepen.io/KobeIndemans/pen/VwXqEwE 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!

Thank you for your answer, but the pinned element is still shaking. (tested on multiple browsers)

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!

Thank you Jack! The extra wiggle room in combination with fastScrollEnd comes closests to the effect I was looking for. I guess the interaction between a numerical scrub (time delay) and scroll position is always a tricky one, especially with the transition from black to white background in the end.

Hi, I've hooked up a Lottie animation to ScrollTrigger with a numerical scrub (smoother). This works great but at the end of the animation, the ScrollTrigger unpins before the animation has been fully completed. Is there a way to unpin the ScrollTrigger only after the scrub has completed? I've already experimented with fastScrollEnd but this is still not quite the effect I'm looking for. Any help will be greatly appreciated!