animation will pauses when the browser is minimized

[Scxppp]

Hello, I am a beginner. When using tween in Three.js, I found that when an animation starts executing and I minimize the browser(edge), the animation pauses. Is there any way to avoid this situation and ensure that the animation can continue to play and complete normally even when the browser is minimized?

[mk965]

In most browsers, when the window is minimized or not in focus, the rendering may pause to save resources. To work around this, you can use the requestAnimationFrame function and implement a way to track elapsed time manually.

One approach is to store the start time of the animation and update the animation based on the elapsed time instead of relying solely on frame updates. This way, even if the browser is minimized, the animation can continue based on the recorded time.

Here's a simplified example:

let startTime;
let duration = 2000; // Animation duration in milliseconds

function animate(time) {
    if (!startTime) startTime = time;
    let elapsed = time - startTime;

    // Calculate progress
    let progress = Math.min(elapsed / duration, 1);

    // Update your tween or animation based on progress
    tween.update(progress);

    if (progress < 1) {
        requestAnimationFrame(animate);
    }
}

// Start the animation
requestAnimationFrame(animate);

This way, the animation logic is based on the time elapsed, ensuring it continues smoothly even when the browser loses focus.