jQuery animation loop breaks when changing browser tabs

Im working on a simple, not so simple “rain” animation, which involves few rain drops being created and fall down. To make the animation repeat, i call it in a loop, sorta recursively(infinite). To make rain drops appear on different intervals, i use a setTimeout, to initiate the animation iteration for every rain drop, however i encoutenred a major problem. Apparently jQuery animations cease when a user switch browser tabs and start over, once the user returns to the animation tab. The problem in my case is, they no longer correspond with the initial timeout delay they have beween one another and start all together, making the raindrops fall in sync. The setTimeout is only called once, to initiate the animations loop. Here is a snippet to the effect of question:

const rainDrop="<div class='rain-drop'></div>"  //represent the html raindrop element

for (let i=0; i<6; i++) {  //loop six times to produce 6 raindrops
  setTimeout(()=>{   //timeout creates a delay between creating each raindrop
    const drop=$('.rain-drop').eq(i)  //select the nth raindrop
    function loop(){     
      $(drop).css({top: 0, right: i*50})
        top: '+=150px',
        right: '+=30px'
      }, 1400, loop)  //animation loop which is recalled on animation stop
  }, i*1000)

It starts as supposed on initiation, but if i swap tabs, the 6 looping animations pick up at the same moment.

Any recommendations on how to solve the issue, so animations remain with the same time difference is welcome

PS: this is the working codepen
There you can see the visual representation, but its work in progress and you might not see what you are supposed to, plus the raindrops frame is quite small part of the project, so it can be hard to navigate.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.