Jump to content


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

Recommended Posts

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 ? :) 

Link to comment
Share on other sites



Based on these articles:



I came up with this:


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


The only drawback in this approach is that you can't use the module approach for styling each page:


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


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:



Happy Tweening!!!!

  • Like 4
Link to comment
Share on other sites

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 ! 

  • Like 1
Link to comment
Share on other sites

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:




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!!!

  • Like 3
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.