I am creating a simple game website and would like to include an image animation when the user navigates to or from the game route. The animation involves game character images moving from left and right to cover the whole page and then moving back when the page has changed.
What I have tried:
Initially, I attempted to implement a solution where the router would wait for a specific time before changing the route. I planned to use a top-level component to contain the animation. After the route would change the other half of the animation will run. However, I could not stop the page from navigating for specific seconds in react-router v6. Next, I tried using the react-transition-group library to create a simple page transition animation for starters, but I could not make it work for just one route. I felt like it was a dead end and stopped pursuing it. I would like some guidance to point me in the right direction. Could this be done using a library or would it require a custom solution?