onUpdate doesn't fire when we are in another tab

[Brian Salazar]

Hi guys Im having a issue with onUpdate function in one animation, as the title says onUpdate doesn't fire when we are in another tab, this is some of my code:

 

 mainProgressAnimation = gsap.fromTo(mainLoadingCircle, {
        drawSVG: '0%', visibility: 'visible',
      }, {
        drawSVG: '100%', ease: 'none', duration: totalDuration, onUpdate: __searchingProgressHandler,
 });

 

    function __searchingProgressHandler() {
      if (mainProgressAnimation) {
        actualProgress = mainProgressAnimation.progress() * 100;
      }
      var roundActualProgess = Math.round(actualProgress);
      $('.js-progress-percentage').html(roundActualProgess+"%");
      if (roundActualProgess >= actualStartPoint && roundActualProgess < 100) {

        gsap.fromTo([secondaryLoadingCircle, secondaryLoadingCircleMobile], {
          drawSVG: '0%', visibility: 'visible',
        }, {
          drawSVG: '100%', ease: 'none', duration: duration,
        });
      }
    }

 

I remove some part of the code but basically in the update I have a function to display in the html the current progress(Im using a circular loading bar), also I have other small loadings that I need to start when the progress is like 20% Im checking that in the same update function but when I go to another tab the onUpdate function doesn't fire, Im using gsap.ticker.lagSmoothing(0);

[GreenSock]

That's totally normal - browsers throttle requestAnimationFrame and setTimeout() and pretty much everything else when the tab is hidden in order to conserve battery power and computing resources. GSAP isn't doing that - it's the browser itself, and it's not related to lagSmoothing().

 

Why would you want your code to constantly run at 60fps when the tab is hidden? Typically that's a big no-no. Perhaps if you explain why you want to do something like this, we could offer a different solution. But I would strongly recommend NOT trying to figure out a way to run your code at 60fps in a hidden tab.