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
88 stars 6 forks source link

Transition Animations Using Browser Back and Forwards Buttons #2

Closed henrybabbage closed 2 months ago

henrybabbage commented 3 months ago

Hello, Amazing work on this package. I am testing it for page transitions with GSAP and it works for me smoothly and reliably.

I noted that when using the browser's back and forwards buttons, the transition animation is skipped and the page instead transitions instantly. Is a transition animation supported when using the browser's back and forwards buttons? Or are there reasons for not including the animation, from a technical or UX perspective?

Having attempted to find reliable solutions for page transition animations using NextJS, I realise there can be many edge cases when it comes to navigating and a challenge to maintain expected behaviours throughout these edge cases. I was pleased to see that during a back or forwards navigation when using this package, the scroll position is preserved, which is great and desirable (this being an issue I have encountered with Next in other cases).

So basically my question is whether transition animations using the browser's back or forwards buttons are possible with this package, or whether I have simply overlooked something when trying to do that?

ismamz commented 3 months ago

Hi @henrybabbage,

Thank you for your valuable feedback, and I'm glad to hear that you're having a smooth experience with the package.

Regarding your question, the library intentionally avoids intercepting the browser's native back and forward navigation. This decision is grounded in UX considerations. Users expect these buttons to behave in a certain way, typically without added delays or interruptions. By keeping the navigation instant, we preserve the user's expectations and prevent any potential frustration that could arise from unexpected behavior or perceived performance issues.

That said, if you still find it necessary to add transitions in those cases, you can explore ways to prevent the browser’s default back and forward behavior and use the navigate method provided by useTransitionState.

You bring up an interesting point about using transition animations with router.back(). It could be beneficial to add support for this within useTransitionRouter. For those who prefer the default behavior, the standard Next.js router would still be available. I will consider this for future updates.

Thanks again for your input! Please feel free to reach out if you need further assistance.

henrybabbage commented 2 months ago

Hi @ismamz

Thank you for the generous and detailed answer, that helps a lot and definitely answers my question.

The reasoning for not intercepting the browser's native back and forward navigation makes a lot of sense in light of the UX considerations you outlined. If indeed I do go down the route of adding transitions to the browser's forward and back navigations, I will report back here with my findings for anyone reading in the future.

Thanks again for sharing your rationale and thinking!

ismamz commented 2 months ago

@henrybabbage I've added support for router.back() method. Also, I've added a comment in the README regarding this issue and a link to here.

henrybabbage commented 2 months ago

Hi @ismamz that's great! Thank you for updating me. I'm looking forward to giving it a try.