Animation Control Implementation

I'd be happy to help with your animation control implementation. Since you mentioned you're testing on CodePen but didn't share the specific code, I'll provide a general solution for implementing the features you described and address the common issue of progressively shorter animation duration.

Solution for Animation Controls

Here's a complete implementation that includes:

• A slider to control/visualize progress
• Forward/backward buttons with play/pause functionality
• Consistent animation timing

JAVASCRIPTCopied
// Animation configuration
const config = {
  duration: 5000, // Animation duration in ms
  element: document.querySelector('.animated-element'),
  slider: document.querySelector('#progress-slider'),
  forwardBtn: document.querySelector('#forward-btn'),
  backwardBtn: document.querySelector('#backward-btn')
};

// Animation state
let state = {
  progress: 0, // 0 to 1
  isPlayingForward: false,
  isPlayingBackward: false,
  animationStartTime: null,
  animationStartProgress: 0
};

// Initialize slider
config.slider.min = 0;
config.slider.max = 1000;
config.slider.value = 0;

// Update visual state based on progress (0-1)
function updateVisualState(progress) {
  // Clamp progress between 0 and 1
  state.progress = Math.max(0, Math.min(1, progress));
  
  // Update slider position
  config.slider.value = state.progress * 1000;
  
  // Apply animation state to element
  // This could be CSS transforms, styles, or any visual change
  config.element.style.transform = `translateX(${state.progress * 300}px)`;
}

// Animation loop
function animationLoop(timestamp) {
  if (!state.animationStartTime) {
    state.animationStartTime = timestamp;
  }
  
  const elapsedTime = timestamp - state.animationStartTime;
  let newProgress = state.animationStartProgress;
  
  if (state.isPlayingForward) {
    // Calculate progress based on elapsed time
    newProgress = state.animationStartProgress + (elapsedTime / config.duration);
    
    // Stop at the end
    if (newProgress >= 1) {
      newProgress = 1;
      state.isPlayingForward = false;
    }
  } else if (state.isPlayingBackward) {
    // Calculate progress for backward animation
    newProgress = state.animationStartProgress - (elapsedTime / config.duration);
    
    // Stop at the beginning
    if (newProgress <= 0) {
      newProgress = 0;
      state.isPlayingBackward = false;
    }
  }
  
  updateVisualState(newProgress);
  
  // Continue animation if playing
  if (state.isPlayingForward || state.isPlayingBackward) {
    requestAnimationFrame(animationLoop);
  } else {
    state.animationStartTime = null;
  }
}

// Forward button click handler
config.forwardBtn.addEventListener('click', () => {
  // Toggle forward playback
  if (state.isPlayingForward) {
    // Pause
    state.isPlayingForward = false;
    state.animationStartTime = null;
  } else {
    // Start playing forward
    state.isPlayingForward = true;
    state.isPlayingBackward = false;
    state.animationStartProgress = state.progress;
    state.animationStartTime = null;
    requestAnimationFrame(animationLoop);
  }
  
  updateButtonStates();
});

// Backward button click handler
config.backwardBtn.addEventListener('click', () => {
  // Toggle backward playback
  if (state.isPlayingBackward) {
    // Pause
    state.isPlayingBackward = false;
    state.animationStartTime = null;
  } else {
    // Start playing backward
    state.isPlayingBackward = true;
    state.isPlayingForward = false;
    state.animationStartProgress = state.progress;
    state.animationStartTime = null;
    requestAnimationFrame(animationLoop);
  }
  
  updateButtonStates();
});

// Slider input handler
config.slider.addEventListener('input', () => {
  // Pause any ongoing animation
  state.isPlayingForward = false;
  state.isPlayingBackward = false;
  state.animationStartTime = null;
  
  // Update progress based on slider
  const progress = config.slider.value / 1000;
  updateVisualState(progress);
  updateButtonStates();
});

// Update button visual states
function updateButtonStates() {
  config.forwardBtn.textContent = state.isPlayingForward ? "Pause" : "Play ▶";
  config.backwardBtn.textContent = state.isPlayingBackward ? "Pause" : "◀ Play";
}

// Initial setup
updateVisualState(0);
updateButtonStates();

HTML Structure

HTMLCopied
<div class="controls">
  <button id="backward-btn">◀ Play</button>
  <input type="range" id="progress-slider" min="0" max="1000" value="0">
  <button id="forward-btn">Play ▶</button>
</div>

<div class="animated-element">
  <!-- Your animated content here -->
</div>

CSS Styling

CSSCopied
.controls {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

#progress-slider {
  flex-grow: 1;
  margin: 0 10px;
}

.animated-element {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
}

Fixing the "Progressively Shorter Duration" Bug

The issue you're experiencing with progressively shorter animation duration typically happens when:

1. Animation timing is reset incorrectly: If you're not properly tracking when the animation starts/stops
2. Cumulative timing errors: When animation progress is calculated based on previous progress
3. Missing animation state reset: Not properly resetting timing variables when toggling play/pause

The solution I provided addresses these issues by:

1. Resetting animationStartTime to null when pausing
2. Storing the current progress as animationStartProgress when starting playback
3. Calculating new progress based on elapsed time from the animation start
4. Using requestAnimationFrame for smooth animation timing

This approach ensures consistent animation speed regardless of how many times you play, pause, or scrub through the animation.