search

ismamz / next-transition-router

Easily add animated transitions between pages using Next.js App Router and your favorite animation library.
https://next-transition-router.vercel.app
MIT License
51 stars 5 forks source link

Usage of gsap example with multiple routes #11

Open milindgoel15 opened 1 week ago

milindgoel15 commented 1 week ago

Hi,

Been trying to port my pages router portfolio to app router and the only issue is we all know route transitions. Tried your package but it seems it's been working for only when I switch any page to home page and not when I switch from home to other.

from /about to / works but not vice versas. any ideas why? didn't change anything in the provider code.

ismamz commented 1 week ago

Hi @milindgoel15, are you using the exact same GSAP example here? Is the element selector present on both pages? Are you using the auto mode or using the custom Link component?

milindgoel15 commented 4 days ago

Hi @milindgoel15, are you using the exact same GSAP example here? Is the element selector present on both pages? Are you using the auto mode or using the custom Link component?

I actually copied the necessary stuff from the example repo provided which is only the transition provider file i believe.

The auto mode is already set to on with that provider.

Tho trying with the next-transition-router Link works. Not with the auto mode

ismamz commented 4 days ago

Hi @milindgoel15, are you using the exact same GSAP example here? Is the element selector present on both pages? Are you using the auto mode or using the custom Link component?

I actually copied the necessary stuff from the example repo provided which is only the transition provider file i believe.

The auto mode is already set to on with that provider.

Tho trying with the next-transition-router Link works. Not with the auto mode

Could you send me a StackBlitz or CodeSandbox example to reproduce it?

milindgoel15 commented 3 days ago

Will create one and send

milindgoel15 commented 23 hours ago

I tried to create a minimal nextjs locally and used the provider file. Some things I noticed is that, if I route from one page to another in that minimal nextjs app, the console log appears for other pages other than home page as well.

However, in my portfolio, it doesn't show for other routes but only when I route from /A to / . But it works if I use transition link component.

(although I wasn't able to get the animation on the test repo but it seems to be work behind the scenes based upon console logs and how the div style manipulates in the elements view)

ismamz commented 16 hours ago

@milindgoel15 If you can share the code with me to take a look, that would be great. You can use this StackBlitz as a starting point. I would like to be able to reproduce the problem to find a solution.