Alan Brown

Update: Conditional rendering actually broke the ScrollSmoother effects, so it's perhaps a bit too nuclear for this. What I eventually did was pass an isRendered state from _app down into the page components then wrapped the useLayoutEffect and all the GSAP code inside a conditional statement, passing isRendered into the dependancy array. I'm sure there's a cleaner way, but It seems to have fixed it.

@Rodrigo I think this might have worked! I added a useState to the _app file, passed it to the component and conditionally rendered the other components based on the state. It fixed my demo at least. I'm sure this is the issue, my solution might not be very elegant but if it works ?‍♂️ Thanks for this!

@elegantseagulls Thanks for this! I moved the smoother code to _app but no luck.. Are you using Next 13? And do you also have scrolltriggers/timelines set up elsewhere that work fine? I'm wondering if Next 13 + GSAP are just not playing nice at the moment, since Next13 is all server side by default. Admittedly, I've gone big here! First time GSAP with Smoother, ScrollTriggers and Nested Timelines . If I need to take smoother out, it's not the end of the world. But I want to keep it because it's cool. And it works in dev preview, so there must be a way..

@elegantseagulls No I hadn't, but just tried it there and same result. I think you're right in that it's something to do with the order of loading. Or Next.JS's SSR breaking things in build

Thanks @Rodrigo and @elegantseagulls. I've gone and removed my private token from the sandbox (oops), here is the link again But to make things simpler, I've spun up another smaller codesandbox here, where I've tried to replicate the issue with a couple of nested timelines. You can see the text is not animating in. If I remove gsap.context from the scrollsmoother, it works. But then wont work when it builds.

Hello. This is my first proper project with GSAP, been enjoying learning and animating with it. ? I have this example on codesandbox. It uses ScrollSmoother, ScrollTrigger and some timeline animations on text. Everything works perfectly in the dev preview with npm run dev. But when I build the project with npm run build then npm run start, many of the animations just dont run. Especially when using nested timelines. All of the calls are inside a useIsomorphicLayoutEffect hook and I've used context and refs everywhere. Here are some findings: The animations run when I take out ScrollSmoother (But I want to keep it) When I take the ScrollTrigger out, the animation will run All runs fine on the dev preview I wonder if anyone has had similar issues or can shine a light on what might be causing it? Preview: https://yu9mle-3000.preview.csb.app/ Build: https://modernage-web-git-main-modern-age-digital.vercel.app/ Thanks!