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
$('#container').append(rainDrop)
const drop=$('.rain-drop').eq(i) //select the nth raindrop
function loop(){
$(drop).css({top: 0, right: i*50})
$(drop).animate({
top: '+=150px',
right: '+=30px'
}, 1400, loop) //animation loop which is recalled on animation stop
}
loop()
}, 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.