Animate before route change with anchor tag (Next.js)

[medmedmed75 6 Likes (Newbie)]

Hey everyone! 

 

I was wondering if it possible to animate a page before the route change?

I'm currently using a classic technic with Router.push(newUrl) when the animation is completed but I'm losing the anchor tag SEO benefit. 

 

Any idea ?  

[Rodrigo 4,057 Likes (Superhero)]

Hey,

 

Based on these articles:
https://dev.to/anxiny/page-transition-effect-in-nextjs-9ch

https://ellismin.com/2020/05/next-page-transition/

 

I came up with this:

https://github.com/rhernandog/next-gsap-transitions

Live sample (nothing fancy, just a proof of concept):

https://cranky-heyrovsky-83f0a9.netlify.app/

The only drawback in this approach is that you can't use the module approach for styling each page:
https://dev.to/koraysels/comment/1f341

 

Also @John Polacek has this package, but I don't know if it is production-ready, John should be the one to tell us:
https://github.com/johnpolacek/TweenPages

 

Hopefully these help you get started.

 

Finally if I was you I would invest time in using Nuxt since they have Vue's native animation solution implemented without any of this hassles. I recently did a little consulting for this site created with Nuxt and GSAP and works great:

https://fcwisi1.ch/

 

Happy Tweening!!!!

[medmedmed75 6 Likes (Newbie)]

Hey @Rodrigo Sorry for the late response, off for the weekend but thank you so much for your explanations and source! Good inspiration  I will maybe purpose something but I think Next should a more flexible routing (as Nuxt for example). 

 

Thanks again ! 

[Rodrigo 4,057 Likes (Superhero)]

I don't want to be that annoying intransigent guy that defends something just because. While Nuxt routing could be a bit more confusing than Next's routing, is not at all complex and they share quite a few similarities:

https://nuxtjs.org/docs/get-started/routing

https://nuxtjs.org/docs/features/file-system-routing/

 

While I'm not trying to convince you about ditching Next in favor of Nuxt, I believe that both frameworks' routing systems are quite similar and offer the same functionalities and finally, a fair assessment of both cases can be done by looking the docs and demos on the subject.

 

Happy Tweening!!!