I have a particular component for the home page of my application that has a cool css animation to change colors. It goes through 3 colors for a total of 120s.

Though I have a problem... Whenever I go to another page, for example I go to the /blog path and then decide to go back to the home page this component will start its animation from the beginning.

Since its a 100vw 100vh component Its quite obvious that it re-renders. My idea is to make it so that it doesn't re-render at all and the animation is always running in the background no matter which page you are on.

I tried to wrap it with React.memo, but that didn't work. I'm open to ideas and would appreciate any feedback. Thank you!