search

joshwcomeau / react-flip-move

Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
http://joshwcomeau.github.io/react-flip-move/examples
MIT License
4.09k stars 258 forks source link

Elements don't leave if switched to other tab while animation is ongoing #177

Open AfzalH opened 7 years ago

AfzalH commented 7 years ago

I was trying to build a rotating/changing text component with this library and noticed this bug. My component changes the text (removes the previous one and adds a new one) with a timer.

react-flip-bug

The flip move works well as long as I'm on the app tab. However when I go to another tab for a while and come back later, I see (just for a moment) that all those texts are stacked up. It gets fixed almost immediately but that seems like a glitch.

Pruxis commented 7 years ago

I experience the same issue if you change when animation is still ongoing some elements are removed or even added.

mreishus commented 6 years ago

I believe this is due to the use of requestAnimationFrame, which is paused when a tab is in the background.

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame