I managed to create a page transition using the Next 13 App router. However, I'm quite certain that this isn't the optimal approach. I encountered an issue where, due to the heftiness of my pages, the animation would unexpectedly occur before the page had completely loaded. Since the useRouter router in Next 13 does not return a Promise, I couldn't wait for the page to load before triggering my animation. Because of this, I resorted to using a good old setTimeout. I also attempted to use the useTransition hook from React, but I encountered some strange behavior.
Here's a minimal code example of what I did. I'm open to any suggestions for improvement. I'm sharing this because it might be helpful to others.
GSAP Page Transitions in Next.js
in GSAP
Posted
I managed to create a page transition using the Next 13 App router. However, I'm quite certain that this isn't the optimal approach. I encountered an issue where, due to the heftiness of my pages, the animation would unexpectedly occur before the page had completely loaded. Since the useRouter router in Next 13 does not return a Promise, I couldn't wait for the page to load before triggering my animation. Because of this, I resorted to using a good old setTimeout. I also attempted to use the useTransition hook from React, but I encountered some strange behavior.
Here's a minimal code example of what I did. I'm open to any suggestions for improvement. I'm sharing this because it might be helpful to others.