Nier

Hi, Jonathan. Thanks for you replying. I'm sorry that I made you misunderstanding what I mean. I'll try my best to clarify the problem I met here. What I want to do is to DISABLE the lagSmoothing, which make my Tween paused when I switch to other Browser tabs. Calling lagSmoothing(0) when DOM is ready is fine. It will solve my problem. My tween will continue playing when I switch to other Browser tabs. I want to do some advanced trick. What I want to do is trying to disable lagSmoothing "before" I switch to other Browser tabs, which should make my Tween continue playing, and enable lagSmoothing "after" I switch back to my original Browser tabs. So I try above codes, including using window.addEventListener('blur', function () { console.log("blur called"); TweenLite.lagSmoothing(0); }, false); or using the HTML5 Visibility API you referenced, which is very awesome, BTW. However, the problem is still there. My Tween is still paused when I switch to other Browser tabs, but the blur function is actually called. In other words, my javascript console do print the "blur called" message in above example. I'm very confused here and want to solve this. Of course, my web page is not very heavy loading so enable or disable lagSmoothing looks no different. But I just want to know why this approach is not working here.

Hi, I've tried these event, it doesn't work for my case. It doesn't call focusout at switching tabs. I have no idea how to do with this, because the action 'blur' and 'focus' looks very fit to my question (called blur when switch tabs and called focus when switch back), but the animate still paused... Currently, I set lagSmoothing(0) when the DOM is ready and never set it back. I'll keep finding the solutions. Thanks, guys. If I found some useful tips or solutions I'll edit my post.

Thanks a lot, here's my result. I have tried TweenLite.ticker.useRAF(false), but it's no use, the animation still paused (or as GreenSock said, limited to very low fps). Then I changed to call TweenLite.lagSmoothing(0), and it worked! When I switch to other tabs and switch back, the animate is still sync with the music. After lagSmoothing works, I want to do something like Chrysto said, but looks like blur and focus is not suitable for chrome. However, I think that's another question and not belong to this thread. Thanks again, guys. I have not done many tests so far, but it looks fine for me now. I just wonder about the multi-browser support and mobile browser support (which html5 Web Audio API is total a disaster here). EDIT. I found that "blur" and "focus" actually works, but the TweenLite.lagSmoothing(0); is no use in that function. Which means TweenLite.lagSmoothing(0) is actually called when I switch to other tabs (I checked by put console.log() function in that), but the animation is still paused. window.addEventListener('blur', function () { TweenLite.lagSmoothing(0); }, false); window.addEventListener('focus', function () { TweenLite.lagSmoothing(1000, 16); }, false);

Hello everyone, I'm new to GSAP. I found that when I switch to other tabs, my tweens in timeline will stop to work (or say paused) until I switch back to original tab. That will be a critical problem because I made a music game by GSAP and Web Audio API. When I switch to other tabs, the music will continue playing but the animate won't, which cause the animation and the music are not sync. I have searched some keywords like [pause, switch tab, timeline, tween] but found nothing. Can someone tells me how to fix this? Thanks a lot.