Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
medmedmed75

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

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

  • 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:

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

  • 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.
×