merlin

@coderesolution Some things in our thread may help!

I think, it may be something with React. As we use Next Dynamic: https://nextjs.org/docs/advanced-features/dynamic-import a bunch. I'm not sure if the correct order is kept when using that.

@Cassie @GreenSock We seem to have a fix. We disable ScrollSmoother on mobile and then add refreshPriority: refreshPriority: 9, preventOverlaps: true, anticipatePin: 1, To the scroll triggers. If I then enable ScrollSmoother, it breaks again. So that may be something to look into?

We use multiple scrollTriggers in different components. For instance: useLayoutEffect(() => { if (!ref.current) return; const tl = gsap .timeline({ scrollTrigger: { trigger: containerRef.current, scrub: true, start: '-=15%', end: `+=40%`, }, }) .to(ref.current.position, { y: -11, ease: 'power4.inOut', }); return () => { tl.kill(); }; }, [ref.current, containerRef]); When I disable (early return) ScrollSmoother it seems to overlap all the elements with a scrollTrigger binded to them. But, maybe we need to look at the issue as to why the scrollTriggers end up shocky. If we find something for that, this won't need to be fixed! Since I think the overlapping will be a more complex issue to reproduce?

Hi Jack! Hope you're well This was the most reduced CSB that I could do with react-three-fiber, just to give a good impression and stay closer to what we're building for our client. This is a more reduced version: https://codesandbox.io/s/circling-birds-forked-bvnq23?file=/src/App.js I'm adding a video of the unexpected behaviour. You can see that while scrolling with touch, the pinned container seems to glitch a little up or down (shown as whitespace). Screen Recording 2022-08-16 at 09.25.34.mp4

Hey Cassie! Thanks so much for all the help I added this to check behaviour on mobile, but then all scrolltrigger instances (about 6) are overlapping each other (even when having `preventOverlaps` enabled. So it seems like ScrollSmoother also added some type of sorting/layout behaviour?

Ah sorry! I see that's confusing. The issue arrises when you view the website in Chrome with devtools and emulate mobile (touch) like the video. And also when you just go there on mobile (Chrome, possibly other browsers as well). To recreate (DevTools mobile emulator): - Open https://zosxos.csb.app/ - Open DevTools, Toggle Device Toolbar (CMD+SHIFT+M), pick iPhone 12 or other device - Refresh page - Scroll with "mouse-drag" which is actually a faked touch (like video) To recreate (Mobile): - Open https://zosxos.csb.app/ - Scroll

@Cassie I recreated it again! It's just on Chrome on a Macbook. https://zosxos.csb.app/ https://codesandbox.io/s/circling-birds-forked-zosxos?file=/src/App.js Screen Recording 2022-08-15 at 15.59.44.mp4

I'm trying to recreate one as accurate as possible!

@GreenSockHey Jack! Any updates on this? I'm experiencing the same on Chrome:

@Cassie Previously we thought normalizeScroll fixed the "shaky" scroll. Sadly, it only works when resizing from desktop to mobile size. When I refresh on mobile size, or open the website on mobile, the shakiness remains. Are there any other things I can try next to normalizeScroll?

Thanks Cassie! It seems like this fixes the shaky scroll: useLayoutEffect(() => { ScrollTrigger.normalizeScroll(true); const smoothScroll = ScrollSmoother.create({ smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position // This causes buttons to scroll to top ======================================================================= // smoothTouch: 0, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices) ignoreMobileResize: true, // normalizeScroll: true, onUpdate: x => { useScrollValue.setState({ scrollValue: x.scrollTop() }); }, }); if (window.location.hash) { smoothScroll.scrollTo(window.location.hash, true); } return () => { smoothScroll.kill(); }; }, []);

Some background: We're building a website where we are scrolling through 3D canvas scenes. So we use the onUpdate function to get the scrollTop value. The scrollTop value is then used in Canvas to animate things to tell a story. Since we use multiple components, we also have multiple scrollTriggers. That's why we need ScrollSmoother, scrub and pin

Hi there! I tried combining ScrollSmoother with scrub/pin timelines. Apparently when using a touch-device (or devtools device emulator) it gets extremely shaky when "touch" to scroll. I was wondering if there's anything wrong with the code or that it's a bug? This CSB is a really small example of what i'm doing in a project, where the problem is arising as well. Steps to reproduce: - Open devtools -> mobile view -> iphone 12 - Use mouse to drag on screen (long drag, flicks work!) https://codesandbox.io/s/scrollsmoother-gsap-test-forked-ipydx4

Hiya! @SteveS @Cassie We've sort of found the issue. It seems that removing `smoothTouch` fixed the issue. We're not sure why or how it became an issue. We'll do some further investigating to see why/how that happened. In the meantime, if anyone from GSAP official team wants a copy of the repository, just ask! We're working on a client project so can't just open that up to anyone Best, Level30Wizards