wixAnimationsFrontend.timeline acting odd

Ask the community
, , ,
1

Question:
How can I get wixAnimationsFrontend.timeline.play() to keep going even when I am tabbed out of my website?

Product:
WIX Studio

My current code is:

$w.onReady(function () {
  let helloAnimationFade = wixAnimationsFrontend.timeline(
   {
    "repeat":-1,
    "repeatDelay":1000,
    "yoyo": true
   });

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

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

}

The Main Problem
Whenever I switch to another tab, the animation stops running, which messes up some timing I have with changing the text of my greeting. If anyone wants to take a look at the problem, it is live at ihnr.ca, just load the site then switch to another tab, switch back, and the animation will be messed up.

Have a feeling nobody will know how to solve this one, but if anyone has any other ideas for how I could create the same text animation effect that featured on my website, please let me know.

2

There’s some details on how browsers handle animations generally here: How do browsers pause/change Javascript when tab or window is not active? - Stack Overflow

But typically browsers won’t render things on inactive tabs in order to save resources.

If you’re changing the text of an animated element programmatically then you could change your code so it:

  • Changes the text
  • Plays the animation
  • Pauses the animation after it plays 1 time
  • Changes the text
  • Plays the animation, repeat