<!-- HTML Structure for this example: -->
<!-- <style>
  #animatedBox {
    width: 50px;
    height: 50px;
    background-color: dodgerblue;
    position: absolute;
    top: 100px;
    left: 0;
  }
  #stopButton {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
  }
</style>
<div id="animatedBox"></div>
<button id="stopButton">Stop Animation</button> -->

<script>
// Initial animation state variables
let box = document.getElementById('animatedBox');
let position = 0; // Current X position of the box
let animationId; // Stores the requestAnimationFrame ID for potential cancellation

// Define the core animation function. This function will be called repeatedly.
// It receives a high-resolution timestamp argument from the browser.
function animate(timestamp) {
    // We update the position of the box based on our animation logic.
    // In this simple example, we move it 2 pixels per frame.
    position += 2; 

    // Check if the box has moved off-screen to the right.
    // If so, reset its position to the left edge to create a looping effect.
    if (position > window.innerWidth - box.offsetWidth) {
        position = 0; // Reset position
    }

    // Apply the new position to the box's transform style property.
    // Using `transform` is generally more performant as it often triggers GPU acceleration.
    box.style.transform = `translateX(${position}px)`;

    // Crucially, we request the next frame by calling requestAnimationFrame again
    // with the same `animate` function. This creates a continuous animation loop.
    animationId = requestAnimationFrame(animate);
}

// We ensure the DOM is fully loaded before attempting to access elements.
document.addEventListener('DOMContentLoaded', () => {
    // Validate that the animated box element exists.
    if (box) {
        // Start the animation loop for the first time.
        animationId = requestAnimationFrame(animate);
    } else {
        // Log an error if the element is not found, aiding in debugging.
        console.error("Animated box element not found. Please ensure #animatedBox exists in HTML.");
    }

    // Implement a mechanism to stop the animation, for example, via a button click.
    const stopButton = document.getElementById('stopButton');
    if (stopButton) {
        stopButton.addEventListener('click', () => {
            // Use cancelAnimationFrame with the stored ID to halt the loop.
            cancelAnimationFrame(animationId);
            console.log("Animation stopped.");
        });
    }
});
</script>

<!-- HTML Structure for this example: -->
<!-- <style>
  #advancedAnimatedBox {
    width: 70px;
    height: 70px;
    background-color: rebeccapurple;
    position: absolute;
    top: 200px;
    left: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: sans-serif;
  }
</style>
<div id="advancedAnimatedBox">Click Me!</div>
<p style="position: absolute; top: 280px; left: 0; font-family: sans-serif; font-size: 0.9em;">Click the purple box to animate!</p> -->

<script>
let advancedAnimatedBox = document.getElementById('advancedAnimatedBox');
let animationStartTime = null; // Stores the timestamp when the current animation started
let animationDuration = 2000; // Total duration of the animation in milliseconds
let startX = 0; // Starting X position for the animation
let targetX = 500; // Target X position for the animation
let currentX = startX; // Current X position, used for interpolation
let animationActive = false; // Flag to control animation state

// Easing function: A simple linear interpolation for demonstration.
// 't' is the normalized time (progress) from 0 to 1.
function easeLinear(t) {
    return t;
}

// The animation loop, incorporating delta time for frame-rate independence.
function animateWithDelta(timestamp) {
    if (!animationActive) return; // Exit if animation is not active

    if (!animationStartTime) {
        animationStartTime = timestamp; // Initialize start time on the first frame
    }

    // Calculate the progress of the animation (0 to 1)
    let elapsed = timestamp - animationStartTime;
    let progress = Math.min(elapsed / animationDuration, 1); // Clamp progress at 1

    // Apply easing to the progress value
    let easedProgress = easeLinear(progress);

    // Calculate the current position based on eased progress
    // Linear interpolation: start + (end - start) * progress
    currentX = startX + (targetX - startX) * easedProgress;

    // Apply the calculated position to the element's style
    advancedAnimatedBox.style.transform = `translateX(${currentX}px)`;

    // Continue the animation if not yet complete
    if (progress < 1) {
        requestAnimationFrame(animateWithDelta);
    }
    else {
        // Animation completed
        console.log("Animation complete!");
        animationActive = false; // Deactivate animation
        animationStartTime = null; // Reset for potential re-trigger
        // You might want to update startX/targetX here for a new animation sequence
        startX = currentX; // Set current position as new start for next animation from here
    }
}

document.addEventListener('DOMContentLoaded', () => {
    if (advancedAnimatedBox) {
        // Trigger animation on click
        advancedAnimatedBox.addEventListener('click', () => {
            if (!animationActive) {
                animationActive = true; // Activate animation
                animationStartTime = null; // Reset start time for a fresh animation run
                // Optionally, define new start/target positions for a different animation
                // For continuous forward motion, targetX can be dynamic
                // For a simple reset and re-run, keep startX and targetX constant or swap them.
                
                // Example: Animate back and forth
                if (startX === 0) { // If currently at start, animate to target
                    startX = 0; 
                    targetX = 500;
                } else { // If at target, animate back to start
                    startX = 500;
                    targetX = 0;
                }
                requestAnimationFrame(animateWithDelta);
            }
        });
    } else {
        console.error("Advanced animated box element not found. Please ensure #advancedAnimatedBox exists in HTML.");
    }
});
</script>

<!-- HTML Structure for this example: -->
<!-- <style>
  #readWriteBox {
    width: 100px;
    height: 100px;
    background-color: olive;
    position: absolute;
    top: 350px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: sans-serif;
  }
</style>
<div id="readWriteBox">Optimized</div> -->

<script>
let readWriteBox = document.getElementById('readWriteBox');
let boxWidth = 0; // Cached width after initial read
let currentOscillation = 0; // For sine wave effect

function updateDOMOptimized(timestamp) {
    // Phase 1: Read all necessary DOM properties ONCE at the beginning of the frame.
    // Reading properties like offsetWidth, clientHeight, getComputedStyle() can trigger a reflow/layout.
    // Doing all reads here ensures this potentially costly operation happens only once per frame.
    if (boxWidth === 0) { // Cache initial width to avoid repeated reads
        boxWidth = readWriteBox.offsetWidth; 
        console.log("Initial box width cached:", boxWidth);
    }

    // Perform calculations based on the read (or cached) values.
    // These calculations should be purely CPU-bound and not touch the DOM.
    // Example: A sine wave movement based on time.
    currentOscillation = Math.sin(timestamp / 500) * (window.innerWidth / 4); // Oscillate within 1/4 of window width
    let newPositionX = (window.innerWidth / 2) - (boxWidth / 2) + currentOscillation;

    // Phase 2: Write all DOM properties AFTER all reads and calculations are complete.
    // Grouping all writes here minimizes browser re-calculations (layout/paint).
    // Using `transform` is highly recommended for animations as it benefits from GPU acceleration.
    readWriteBox.style.transform = `translateX(${newPositionX}px)`; 

    // Request the next animation frame.
    requestAnimationFrame(updateDOMOptimized);
}

document.addEventListener('DOMContentLoaded', () => {
    if (readWriteBox) {
        // Start the optimized animation loop
        requestAnimationFrame(updateDOMOptimized);
    } else {
        console.error("Read/Write box element not found. Please ensure #readWriteBox exists in HTML.");
    }
});
</script>