Set position not updated when open another tab

Question

I do a growth animation of a fixed number of items, and after growth, i moved it to left.
Make growth by apply matrix

var trans_vector = new THREE.Matrix4().makeTranslation(0, height / 2, 0);
var graphics = new Graphics();
var rectangle = graphics.box(width, height, material);
rectangle.geometry.applyMatrix(trans_vector);

When a new item is added, i remove one from the container that will be added to scene

    var children = this.container.children;
    if (this.current_number === this.max_number) {
        this.container.remove(children[0]);
        this.current_number = this.max_number - 1;
    }
    object.position.copy(this.position); // this is a fixed position
    this.container.add(object);
    this.current_number++;

I write a function to translate to left, using tweenjs (sole)

animateTranslation : function(object, padding, duration) {
    var new_x = object.position.x - padding; // Move to left
    console.log(new_x); // Duplicated item here :(
    new TWEEN.Tween(object.position).to({
        x : new_x
    }, duration).start();
},

And I remove all the "previous" items, using for loop

for (var i = 0; i < this.current_number-1; i++) {
        this.animateTranslation(this.container.children[i], 
                    this.padding,
                    this.duration/4)
    }

The above code run correctly if we open and keep this current tab. The problem is when we move to another tab, do something and then move back, some objects have the same position, that cause the translation to the same position. It looks weird.
It appears on both Chrome, Firefox and IE11.
I dont know why, please point me out what happened.

Answer 1

Most modern browsers choose to limit the delay in setInterval and pause requestAnimationFrame in inactive tabs. This is done in order to preserve CPU cycles and to reduce power consumption, especially important for mobile devices. You can find more details about each browser in this answer

That means, while the tab is inactive, your tween animation is not working the way it is normally expected to.

A simple solution would be to halt the main animation loop if the tab is inactive using a variable.

window.onfocus = function () { 
  isActive = true; 
}; 

window.onblur = function () { 
  isActive = false; 
};