setInterval bug after changing tab in the browser

Ask the community
, , ,
1

Question:
I am using setInterval to slowly rotate the text content of a heading between 5 different words.
I make the text fade, change its contents, then fade back in as the new word, which will cycle on repeat.

This works perfectly, unless, I switch to a different tab in the browser and then on return to my webpage, the timing of the fading and text changing gets all out of whack, and does not work at all.

How can I make this animation stay consistent while changing back and forth between tabs?

My code:

let helloAnimationFade = wixAnimationsFrontend.timeline(
{
“repeat”: -1,
“repeatDelay”: 1000,
“yoyo”: true
}
);

$w.onReady(function () {

     let greeting = $w("#text14");

     helloAnimationFade
        .add( greeting, {
        "opacity": 0,
        "duration": 1000
     } );

    const myArray = ["'Uy' skweyul","Tansi", "Taanishi","Weyt-k","Hello", "ÍY, SCÁĆEL 
                                       HÁLE"];
    let index = 0;

setTimeout(() => {
	helloAnimationFade.play();	
}, 2000);	

setInterval(() => { 
	(index>=myArray.length-1) ? index = 0 : index++;
	$w('#text14').text =  myArray[index]; 
}, 4000);

}

Product:
WIX Studio

2

I just overflew your code and did not find any stop-interval.

What about stopping your interval ?

3

I want it to run indefinitely

4

Did you test/check → if you switch the tab → does your page reload again?

$w.onReady(function () {console.log('Page ready...');
    ....
    ....
    ....
});

That means, always when you switch back and forth between tabs, the page reloads?

Are you able to provide a video, showing the tabs switch and the included issue?

Or where to see this behaviour?

5

Just checked if the page reloads with the console log, and it isnt reloading, so idk
For sure, its ihnr.ca right on the landing page.

6

Any chance you could help me out on this one?

7

I would need to jump into your project to see the issue directly in place.
If you want send me INVITATION to your project —> velo-ninja@outlook.com