Easiest Way to Create Page Transitions using GSAP useGSAP() Hook on Next.js

[whizbbig]

Hello, Friends on the GSAP Forum, since there is a rollout of a hook `useGSAP()` working with the react/next. I wanted to know whats the smart and easiest way to create page transitions for the next.js using GSAP ofcourse. I've asked about this question to some of the people i know and most of them prefer to go with Framer Motion here, as its basically meant for it only, but since I am a GSAP fan, I want to know how i can achieve this with GSAP on Next.js, i hope with the simple straightforward guidance i can able to achieve this successfully!

[Rodrigo]

Hi,

 

The best course of action right now is to use React Transition Group as shown in this demo:

https://stackblitz.com/edit/nextjs-13cw4u?file=Layouts%2FLayout.js,components%2FTransition.js,context%2FTransitionContext.js

 

Due to the way this works, there is no need for the useGSAP hook in the transition component since those are one off animations that will be elegible for garbage collection after they're completed.

 

Is necessary to point out that you have to use the pages router for this approach (animating in and out each page) since this is not possible with the app router regardless of the animation solution you use (Transition Group with either GSAP or CSS, Framer, etc). This is a known issue that hasn't been resolved in over a year by the Next team, nothing to do with GSAP, Framer or other libraries:

https://github.com/vercel/next.js/discussions/42658

 

Here you can find a way to create overlay transitions (the pages are not animated, just an overlay animates over the layout) with GSAP using the app router:

https://medium.com/@josiah.webdev/page-transitions-with-gsap-next-js-app-router-5508cee43a80

 

Finally you can stick with the pages router for simple static websites if you want to use the other way, there is nothing essentially wrong in using the pages router IMHO.

 

Hopefully this helps.

Happy Tweening!

[christopherha]

@Rodrigo Hi, I'm coming from Framer Motion where the /app/ router issue for page route transitions has been a widely discussed topic for a while and still remains unfixed. I'm currently building a project with Next.js App Router + GSAP for work, but plan to migrate to Next.js Page Router + GSAP in order to utilize page route transitions for my next project.

 

From what I understand, the solution you linked uses React Transition Group as a wrapper to handle onEnter and onExit, where we are using GSAP to animate some components. Is this the most common pattern?

 

I'm looking for further documentation on this and would appreciate if there was a link to the origins of this example or if there was more documentation around page transitions Next.js pages router and GSAP (with useGSAP hook).

 

Thanks!

[Rodrigo]

Hi @christopherha and welcome to the GSAP Forums!

2 hours ago, christopherha said:

From what I understand, the solution you linked uses React Transition Group as a wrapper to handle onEnter and onExit, where we are using GSAP to animate some components. Is this the most common pattern?

I wouldn't call it a pattern soto speak, is more about the right tool for the right job. When animating routes (especially when you want to animate the entire page) the conundrum is to animate out the current route, unmount it when the animation is completed, then mount the page for the next route and finally animate that page in. Routing in these type of frameworks doesn't have a timing or anything of the sort to handle that. React Transition Group does that, that's why we use it. Unfortunately React hasn't pay attention to animations (unlike Angular, Vue and Svelte - just to mention three) so there is no way for developers to handle that directly with React, hence the solution has to come from third party libraries.

 

2 hours ago, christopherha said:

I'm looking for further documentation on this and would appreciate if there was a link to the origins of this example or if there was more documentation around page transitions Next.js pages router and GSAP (with useGSAP hook).

There is no documentation on this particular subject because there is not a lot to document actually, it basically stems from my explanation above:

• Change route
• Animate current route out
• When animation out is complete, unmount current route
• Mount next route
• Animate next route in

The demo you see is the simplest and most reliable way to handle all that, trust me, before Transition Group created the SwitchTransition component was even more convoluted and complicated. That's why (and I know this is not your case) when people are starting I recommend leaning towards either Vue or Svelte rather than React:

Hopefully this clear things up.

Happy Tweening!