Bronca Posted May 20, 2021 Share Posted May 20, 2021 Greetings, this is my first post in Greensock Forum. I've read the fixed topic, but if I'm doing something wrong even though let me know, okay? I've encountered a very tricky problem doing a Next.Js project with GSAP. I've created the Timeline and did all the animations I want. Everything works fine, but navigating between links make things harder, because when I push back one route (click back on the top of the browser) all animated elements of the page get their initial CSS setup. (In my case, visibility: hidden, so everything is gone!). In my mind the natural behavior of the page was keep the timeline final state, but this seems not occur. I know that is not a GSAP problem, but I'm wondering if anyone knows a way to workaround this behavior of React / Next.js. I tried restart the Timeline with UseEffect on router back, but no success. Link to comment Share on other sites More sharing options...
OSUblake Posted May 20, 2021 Share Posted May 20, 2021 Welcome to the forums! Can you create a demo on CodeSandbox? Nothing complicated. Just something simple to show the issue? https://codesandbox.io/ Link to comment Share on other sites More sharing options...
Bronca Posted May 20, 2021 Author Share Posted May 20, 2021 27 minutes ago, OSUblake said: Welcome to the forums! Can you create a demo on CodeSandbox? Nothing complicated. Just something simple to show the issue? https://codesandbox.io/ cocky-boyd-p6yk7 - CodeSandbox Oh man, this is so frustrating, the demo on CodeSandBox works! I don't have idea what's happening with my main code, is exactly the same thing. Link to comment Share on other sites More sharing options...
Solution Bronca Posted May 20, 2021 Author Solution Share Posted May 20, 2021 @OSUblake I've found the culprit. Thank you for your support, i'm grateful. Take a look (I don't know why, but in Next.Js the window.onload before play animations common practice "locks" the timeline progress) : Just calling the function instead seems fix everything. Link to comment Share on other sites More sharing options...
OSUblake Posted May 20, 2021 Share Posted May 20, 2021 Why are you using onload? I would expect that to fire only on the intial page load, and not on a route change. Link to comment Share on other sites More sharing options...
OSUblake Posted May 20, 2021 Share Posted May 20, 2021 I guess I'm asking where this is a common practice. I've never seen that before. Link to comment Share on other sites More sharing options...
Bronca Posted May 20, 2021 Author Share Posted May 20, 2021 2 minutes ago, OSUblake said: I guess I'm asking where this is a common practice. I've never seen that before. To fire the animations after all the assets loaded: How to make animations and image load after the page is loaded - GSAP - GreenSock Link to comment Share on other sites More sharing options...
OSUblake Posted May 20, 2021 Share Posted May 20, 2021 Gotcha, but that really doesn't apply to something that is dynamic like React. onload is probably going to fire before your React code even runs for the first time, so I would just ignore everything in that thread. 😉 1 Link to comment Share on other sites More sharing options...
Bronca Posted May 20, 2021 Author Share Posted May 20, 2021 Just now, OSUblake said: Gotcha, but that really doesn't apply to something that is dynamic like React. onload is probably going to fire before your React code even runs for the first time, so I would just ignore everything in that thread. 😉 Newbies do things like that! 🤪 I'll be attentiveness, thanks for all support bro! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now