Animation finishes while loader page is being displayed.

[Shayokh]

I am trying to build a portfolio with multiple pages. The very first page is a loader screen with some text. Right after the loader screen finishes, the landing page shows up.

 

The issue is that the text animation of "JAVED RASIN" gets triggered and completed while the loader screen is being displayed. It's simply not waiting for the loader to finish and then start the animation.

 

Here is the stackblitz project - https://stackblitz.com/edit/github-sq9mef9f?file=app%2Fpage.tsx

[Cassie]

Hi Shayokh, 

 

I'm afraid we don't have the resources to debug your entire portfolio.

 

Can you simplify down the logic to a smaller demo?

How is the text animation triggered? There are a lot of different ways to handle sequences or firing off animations at specific times. Some GSAP specific (like timelines), and others more specific to your framework - Like changing a state value that triggers a component refresh.

 

[Rodrigo]

Hi,

 

Yeah Cassie is right, there is far too much code in your demo for us to go through all of it trying to find what could be the problem. Is quite clear that the animation you mention is running while the loader is still visible, you could try using state inside some components or some state management solution in order to know exactly when the loader is completed and once that is finished start the other animations. Another option is use state and conditional rendering to render the other components only when the loader has finished, that will create and run the animation only when the loader has completed.

 

Finally is far easier to help with a minimal demo (emphasis on minimal), we understand that creating a stackblitz demo from a full project on a repo is faster and easier but we can't fork those and as I mentioned before, going through an entire codebase is something we can't do, we simply don't have the time resources for that I'm afraid.

[Shayokh]

I am really sorry for not putting enough effort into presenting the issue properly. I hope to fix that before my next post.

 

About the issue, I did quite a bit of digging and found out that it's mostly a logical issue and highly related to how react hooks handle value between page transitions. I am looking into proper react state management. Also, I think I have to redesign the codebase because the current implementation feels poorly developed.

 

If the issue persists, I will let the GSAP team know.

Thanks!

[Rodrigo]

Don't worry about it, no need to apologize. Again we understand that posting the entire codebase makes it simpler/easier, is just that traversing all that code is too time consuming and a minimal demo IS by far, the best and faster way to help our users, that's why we're so adamant to requesting them.

 

If you keep having issues, please let us know so we can help you as much as possible.

 

Happy Tweening!