1

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!

customrevolution
  • 11
  • 2
  • Very interesting question. I managed to find this: https://stackoverflow.com/a/60241167/12485722 hope it gives you an idea. – Eduards Dec 25 '21 at 12:12
  • 2
    You need to persist `Animation.currentTime` between pages. You can use the context API or maybe some state management library like redux, recoil, zustand to persist that. – brc-dd Dec 25 '21 at 12:18
  • what about mapping the animation with time i.e. animation-time = (time-passed)/(total-time) . And store the progress in global state and whenever the page reloads starts the animation from where it lefts. After time reaches to total-time set the animation-time = 0. – Sahil Rajpal Dec 25 '21 at 12:25

0 Answers0