Sequential Animation with Lerp in Three.js

To execute position and rotation transitions sequentially, you need to track the state of your first animation and only start the second one when the first is complete. Here's how you can modify your code to achieve this:

JAVASCRIPTCopied
// Define a state variable outside your animation loop
let isPositionAnimationComplete = false;
const positionThreshold = 0.01; // How close to target to consider "complete"

function animate() {
  // Your other animation code...
  
  if (condition) {
    // First handle position animation
    const newPosZ = lerp(cube.position.z, -2, delta * 1);
    cube.position.z = newPosZ;
    
    // Check if position animation is complete
    if (!isPositionAnimationComplete && Math.abs(newPosZ - (-2)) < positionThreshold) {
      isPositionAnimationComplete = true;
    }
    
    // Only start rotation animation after position is complete
    if (isPositionAnimationComplete) {
      cube.rotation.y = lerp(cube.rotation.y, degToRad(180), delta * 2);
    }
  } else {
    // Reset the state when condition is false
    isPositionAnimationComplete = false;
  }
  
  // Continue animation loop
  requestAnimationFrame(animate);
}

This approach:

1. Tracks whether the position animation is complete using a boolean flag
2. Checks if the current position is close enough to the target (within a threshold)
3. Only starts the rotation animation once the position animation is complete
4. Resets the state when your condition changes

You can adjust the positionThreshold value to control how precisely the position must match the target before starting the rotation.

For more complex animations, you might want to consider using Three.js's animation system with AnimationMixer and AnimationAction, or a tweening library like GSAP which provides more control over sequencing animations.