ScrollTrigger jumping in Typescript React w/ NextJS & Theme-UI

[jaylerd]

Here's my main sandbox - https://codesandbox.io/s/sharp-feather-ijr4np

 

To start, yes, I am on a bit of a King of the Hill kick.

 

The image in the middle (with text) should be pinning as it crosses the scroller-start, and it does. However, it sometimes jumps around almost glitchy, as if it's not setting the position until the next repaint.  This, of course, is much more noticeable on wheeling as that can happen faster than key-scroll.  This sample is boiled down from my project and uses NextJS, Typescript, and Theme-UI for almost all the components. And no CSS, really - all styles are baked in via these `sx` objects.

 

• I've tried anticipatePin 1-10 with no success
• setting the styling for * { margin: 0 !important; padding: 0 important!} which will affect every element, just not solve the issue
• reparent and no reparent
• changing the scroller from the body to other elements

 

This is my first time using Next, Typescript, Theme, or the ScrollTrigger plugin, so there's a lot I could be missing.

 

I've created an alt version of the project here https://codesandbox.io/s/react-and-scss-forked-s1zt8i, using just React and SCSS - it works perfectly smooth, doesn't require reparenting, etc  so I'm fairly confident there's something about Next / Theme / Typescript / the styling pattern used in this project affecting how things work and are rendered, but I can't suss it out.

 

I've also attached a video where you should be able to see the jump a lot more clearly in the actual app

 

 

Any insight would be appreciated, and thank you for taking the time to look!

[GreenSock]

Welcome, @jaylerd

 

I'm totally unfamiliar with Next.js, etc. so I'm probably not the best person to answer here but it sounds like what you're describing is the result of the browser handling scrolling on a separate thread and being out-of-sync with the main JS thread. Have you tried using the brand new ScrollTrigger.normalizeScroll(true) feature? Does that help at all? 

[jaylerd]

On 4/9/2022 at 1:06 PM, GreenSock said:

Welcome, @jaylerd

 

I'm totally unfamiliar with Next.js, etc. so I'm probably not the best person to answer here but it sounds like what you're describing is the result of the browser handling scrolling on a separate thread and being out-of-sync with the main JS thread. Have you tried using the brand new ScrollTrigger.normalizeScroll(true) feature? Does that help at all? 

B-e-a-utiful, that did it. So much to explore in the docs and sadly this solution never came up on stack overflow.  Thank youuuuuuu, Jack!

[GreenSock]

1 minute ago, jaylerd said:

B-e-a-utiful, that did it. So much to explore in the docs and sadly this solution never came up on stack overflow.  Thank youuuuuuu, Jack!

That's great! Yeah, it won't come up in Stack Overflow because it's a brand-spanking-new feature that we just released so most people don't know about it. Glad it helped!