Transition Animations Using Browser Back and Forwards Buttons

[henrybabbage]

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]

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]

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]

@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]

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