Animation pause when change the browser tab

Hello Members,
I loaded navMesh and animal. Animal is moving on map. But when I changed the tab animal moving pause and if again open that tab animal moving again from pause point. How to play continue animation either tab changed.
jsfiddle & Video

Browsers stop requestAnimationFrame from firing when the tab is not active. There is no way around this, and anyway, you would not want to take up your users battery and CPU time on a tab that they are not looking at.

The best you could do if you need the animation to appear as if it had continued, is start a timer when the tab loses focus, then when the tab gains focus again jump the animation forward by the elapsed time.


Instead of calculating the time values by yourself, you can use THREE.Clock for this task.


@Mugen87 , I used

              function animate() {
                    var lastFrameTime = 0;
		            var maxFrameTime = 0.03;
		            var elapsedTime = 0;

                function animate() {
               var currTime =;
               var delta = (currTime - lastFrameTime) / 1000;
               var dTime = Math.min(delta, maxFrameTime);
               elapsedTime += delta;
                      lastFrameTime = currTime;

			requestAnimationFrame( animate );

it was same like previous, pause on background tab

@sandipnd31 your comment “same problem” means nothing to anyone except for you.

Please take the time to explain clearly what you mean in every comment you make, and make sure that every comment adds something meaningful to the discussion.