Jump to content
Search Community

GSAP Page Transitions in Next.js

John Polacek test
Moderator Tag

Recommended Posts

Hi,

 

So I tried to create a simple example using the app router, React Transition Group and GSAP and ran into the same issues. I did some debugging and indeed Next is removing the previous element immediately which leads to the same element being animated in an odd way.

 

I did some searching on the subject and I saw a few posts here and there and even the latest ones still use the pages router for this which definitely caught my attention. I kept digging and landed on this:

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

 

As you can see this is something related to the app router (since it can't be done with Framer neither), which creates a lot of confusion among React developers because of the whole client/server components, which reflects that the Next team has not been assertive, IMHO, on correctly communicating to developers when and, most importantly, how to use those components. The thing is that client components are still rendered in the server first and then hydrated on the client like Next worked always. What surprises me the most is that Next had ways to fetch data in the server previously that was passed to the client as props in the hydration phase, so I never really understood the switch. I know this because I worked for over a year on a SAAS based on Next that did exactly that in several routes. With the pages router you can still get a really good a performant app whose performance shouldn't suffer tremendously for not using the app router.

 

Sorry to be the bearer of this news but unfortunately there isn't a lot we can do on our side and it doesn't seem to be an urgent matter for the Next team.

 

Hopefully we a way to implement this can be found ASAP 🤞

Happy Tweening!

  • Like 4
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...