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

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!

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

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!

[Problem with loading a sheet of videos / onChildComplete]

Got it, XML formatting error.

[Problem with loading a sheet of videos / onChildComplete]

Yes, I did, otherwise I think errors would be thrown.

 

LoaderMax.activate( [ XMLLoader, VideoLoader ] );
_vidQueue =  new LoaderMax( { name:"vidQueue", onComplete:handleLoaderEvents } );
_vidQueue.append( new XMLLoader("xml/videos.xml", { name:"videosXML", onChildComplete:handleLoaderEvents } ));
_vidQueue.load();

 

When I add the onChildComplete to the new XMLLoader, nothing happens. Only a "complete" event fires.

 

private function handleLoaderEvents($event:LoaderEvent):void {
trace("LOADER EVENT", $event.type);
switch ($event.type) {
case LoaderEvent.COMPLETE:
	break;
case LoaderEvent.CHILD_COMPLETE:
	trace("\t one video complete... \r");
	break;
}
}

[Problem with loading a sheet of videos / onChildComplete]

I am using LoaderMax to load in an xml sheet:

 

_vidQueue =  new LoaderMax( { name:"vidQueue", onChildComplete:handleLoaderEvents } );
_vidQueue.append( new XMLLoader("xml/videos.xml", { name:"videosXML" } ));
_vidQueue.load()

 

inside of that XML are a number of VideoLoaders formatted thusly

 

 

My loader has an onChildComplete listener, but only fires once, regardless of how many video loaders are in the XML.

 

What do I need to do so that a COMPLETE event fires when each individual FLV has completed loading? I cannot (obviously) find what I'm doing wrong in the documentation.

 

Thank you very much.