GSAP does not work when buildoing the react project

[iAmWayne]

HI, can someone help me out. I've been debugging this issue for a week now and I don't know how to resolve this.

So, in development it works fine but in production when I build the project, some gsap animation doesn't work.
The file i am debugging is the Designs.layouts.tsx file. You can refer in this link, https://codesandbox.io/p/github/iAmWayneBenedict/portfolio/master?file=/src/layouts/Home.layouts/Designs.layouts/Designs.layout.tsx:1,1&workspaceId=3c802c73-2725-4792-96c6-3433e1fb3c72

on line 58.

Thanks a lot.

[GreenSock]

Hm, it looks like that link doesn't work. I've tried 4 times now and it's broken (no code, nothing shows up at all). Maybe it's a permissions thing. If you'd like some help, please provide a minimal demo as well as clarification about what you mean by "some gsap animation doesn't work". 

[iAmWayne]

I'm sorry about that, heres the link on codesandbox.

 

So, in src/layouts/Home.layouts/Designs.layouts the Design.layout.tsx file in line 58. That specific block of code doesn't work when I build with vite. Here is the image of that block of code.

[GreenSock]

I don't have time to dig into it all right now, but from a quick glance it looks like you're using React but you're not doing proper cleanup. React double-invokes useEffect()/useLayoutEffect() in strict mode which can often create multiple conflicting ScrollTriggers/animations. gsap.context() is your new best friend in React - it makes cleanup super easy. 

 

I'd strongly recommend reading this article: 

 

If you implement gsap.context() properly and it still doesn't solve things, please post back here and let us know. 

[iAmWayne]

Unfortunately, it still don't work. As you may see in the condesandbox, it works fine but when I build the project it won't work. When you scroll on the design section you will see the background changing to black, and that right there does not work when I build it.

 

EDIT. You can remove the Strictmode in main.tsx to reproduce the error.
 

I hope anyone can help me.

Thank you in advance.

 

[Cassie]

Hi there! Do you have a link to the updated project, using context?

Also what do you mean by "works in production but not when you build it"

Are you saying it's working on codesandbox but not on your own site somewhere? Or are you referring to a specific codesandbox view?

Where is it not working?

[iAmWayne]

Hi, heres the link of the project. I've used the context and useLayoutEffect.

I've created a video clip of the issue. In the clip, I showed that there is a background transition when in Strict Mode but when I removed the Strict Mode, the background transition doesn't work.

Unfortunately, I can't simulate the build process in codesandbox. However, by removing the strict mode also shows the issue.

https://drive.google.com/file/d/1VaGVvItGKm3DkziB_IzEYO1be87wbH6o/view?usp=sharing

[GreenSock]

41 minutes ago, iAmWayne said:

Hi, heres the link of the project. I've used the context and useLayoutEffect.

Hm, that link says "Project not found" - I wonder if it's a permissions issue on your end. 

 

I noticed in your video something very strange, though - it looks like you're setting up a ScrollTriggered tween of backgroundColor and then INSIDE several callbacks (like onLeave), you're creating an entirely new tween that's fighting for control of the exact same thing on the same element. That's definitely problematic. You're basically having one tween tell backgroundColor to go in one direction, and another tween tell it to go in another direction simultaneously. 

 

I looked at your earlier link and noticed a few things: 

1. You're using the Smooth-scrollbar 3rd party library which is not a GreenSock product so we can't really support it here. I strongly suspect that's causing problems here. I wonder if you set up the proper scrollerProxy() so that ScrollTrigger gets updated in the correct way by your scroll-jacking library(?) I'd strongly recommend eliminating Smooth-scrollbar from your project temporarily just to see if the issues are resolved if you use native scroll and no scroll-jacking. 
2. You set up  scroll-behavior: smooth in your CSS. That's problematic because it messes with how the browser reports its scroll position.
3. I don't think this is the reason for your problems, but you're actually creating some of your animations OUTSIDE of the context because you're doing it in the callbacks that likely run after the context function finishes running. But honestly I think it'd be far cleaner to avoid those callbacks that are creating new tweens every time, and instead just create on animation with the ScrollTrigger attached and use the toggleActions to do what you want, like toggleActions: "none play reverse none"  

Typically, StrictMode is what causes problems/confusion because it fires your useEffect()/useLayoutEffect() TWICE, meaning you may be accidentally creating conflicting/duplicate animations or ScrollTriggers. But doing proper cleanup (like with gsap.context()), that's not a problem. 

 

Given the fact that the ScrollTriggers never fire when you don't do StrictMode, that leads me to believe that your 3rd party smooth scrolling library is causing the problems, like it somehow depends on StrictMode to actually fire things properly. ScrollTrigger isn't getting any information about the page itself scrolling (probably because your 3rd party smooth scrolling library has hijacked things and isn't telling ScrollTrigger about the updates). So my recommendation would be to completely remove the smooth scrolling library for now, and get the page scrolling natively. Then see if your ScrolTriggers fire as you'd expect. If not, post back here with a minimal demo showing as much and we can take a peek. 👍