How to dynamically adjust timeScale while maintaining animation continuity? (Real-time speed control for playing animations)

Background

I'm using Tween.js with Three.js to implement camera roaming animations, where I smoothly transition the camera's position and target via . The animation consists of multiple segments, each with fixed target positions, targets, and durations.OrbitControls

Problem

I need to implement real-time speed control (e.g., dynamically adjusting to 0.5x, 1x, 2x, etc.) so that playing animations can continue at the new speed, while maintaining correct time progress after pausing/resuming. However, I’m facing the following issues:

• Directly modifying the animation’s causes incorrect remaining time calculations for the current segment (e.g., sudden jumps when speeding up).

// This will affect the animation that is in play.
setTimeScale(scale) {
    const duration = this.currentTween.getDuration();
    this.currentTween.duration(duration / scale);
  }

The desired behavior is similar to video player speed control: animations should transition smoothly after speed changes, remaining time should scale proportionally with the new speed, and playback should resume from the correct position after pausing.

Start by reviewing the currentTween duration, pause, resume, and progress behavior described in the issue and the setTimeScale example. Compare behavior before and after changing speed while a segment is playing or paused. Done means speed changes preserve animation continuity, scale the remaining time proportionally, and resume from the correct position.