Animations pause when browser tab is not visible
I'm very new to gsap and I've run into this problem. I'm using gsap to animate a progress bar, but when the browser tab or window is not visible the progress bar animation pauses. When I switch back to that particular tab it resumes. I need the animation to keep running even when the tab is not visible. How can I achieve this in gsap?
Here's my code:
var progressBarTimeline = new TimelineLite();
progressBarTimeline.fromTo(progressBarElement, 10, {width:0}, {width:100, ease:Linear.easeNo
There are two things that contribute to this behavior:
By default, GSAP uses the requestAnimationFrame API to drive its "ticks". This is widely considered the best way to do it because it delivers the best performance and synchronizes updates with screen refreshes/repaints. In most browsers, requestAnimationFrame fires about 60 times per second EXCEPT on inactive tabs which typically run at around 2fps or less. This is a feature, not a bug - the browser vendors are essentially "powering down"
