Jump to content
Search Community

NON-stopping tween when switched tab is still unresolved?

dominate test
Moderator Tag

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

When the browser tab is switched, tween also pauses, and yes, this is a feature.

But also the opposite is also very common need!

- Switched to other tab

- Returned to our tab after some time.

- Tweens (or some tweens) are updated as if the tab was never switched, without losing the advantage of RAF.


I have found same questions, like this one: http://greensock.com/forums/topic/9887-tween-paused-when-switch-to-other-tabs/


(And I think much more newbies will ask the same again, since this is also commonly desired feature too!)


The proposed solutions were some workarounds, like RAF, lagSmoothing, etc.


My question is if as of the version 1.18.x the solution is still those workarounds, or there is finally a nice solution.



Link to comment
Share on other sites

My question is if as of the version 1.18.x the solution is still those workarounds, or there is finally a nice solution.



Hm, was there something about those solutions that wasn't "nice"? Please describe what a "nice" solution would be in your opinion. (I don't mean that in a defensive way - I'm just trying to understand how we could help better or why the existing solutions are less than desirable).  

Link to comment
Share on other sites

Sure, I also did not mean in an offensive way. What I meant with "nice" is:

Those workaround solutions have their -expensive- price, ie, losing RAF and/or lagSmoothing.

And what about detecting focus on/off? Well, that is the way that one would do also without GS.


If in GS such feature was added, it would be optimized I guess, somehow better than the workarounds.

I just wanted to know if this happened, since the answers that I found was rather old (about version 1.12.x).


Maybe in later versions we'll have that chance.



Link to comment
Share on other sites

  • Solution

I see what you mean. The challenge is that what you're asking for isn't really a core animation feature and VERY few people need/want it, so it's difficult to justify the kb expense of adding it right into the core, especially because it can already be achieved pretty easily outside the engine. See what I mean? Every time we add a feature to the core, it exacts a cost on every user even if they'd never care to use it, so we just have to be very careful. If we get a LOT of requests for it, we very well may reconsider. And thanks for sharing the suggestion - we always like hearing from users about what they want. 

Link to comment
Share on other sites

If it's a real-time app, couldn't you sync the progress of an animation based on the server time?


But occurs some thing like this:


- Server sends an information to x clients.

- Then clients will see a tween of 10 seconds.

- At the end of tween each client will send ACK to server.

- When server gets x ACK, then advances to next step.

- But meanwhile, when one client goes to other tab and returns, waiting for tween to be finished causes an unnecessary delay.


Of course, the role of server could be increased, but this way decreases the load of the server.

The server does not need every time synchronize the clients, except fundamental checkpoints.

In other words, the server assures that all clients are in the same state but does not bother how they view.

Link to comment
Share on other sites

Ok. I see what you're doing. So how do you deal with latency and disconnects? It's pretty much the same thing going on. But ultimately there is only one thing you can do if you want an animation to continue playing. On a visibility change you're need to toggle between using frames and rAF.

// On hidden

// On visible

There is one caveat though, and it's not related to GSAP. When you switch to frames it's only going to run at 1fps. There's nothing GSAP can do about that because it's an optimization done by the browser. If 1 second is too long of delay and you need more accuracy, you're going to have to hijack the setTimeout method before loading GSAP and run it a web worker.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...