BetterSEQTA-Plus/src/seqta/ui/Animation.js

/**
 * Update the background animation durations based on the slider input.
 * @param {Object} item - The object containing the bksliderinput property.
 * @param {number} [minDuration=1] - The minimum animation duration in seconds.
 * @param {number} [maxDuration=10] - The maximum animation duration in seconds.
 */
export function updateBgDurations(speed, minDuration = 0.5, maxDuration = 10) {
  // Class names to look for
  const bgClasses = ["bg", "bg2", "bg3"];
  let reversedValue;

  if (speed.bksliderinput === undefined) {
    // Reverse the slider direction to align with the animation
    reversedValue = 150 - speed;
  } else {
    reversedValue = 150 - speed.bksliderinput;
  }
  
  // Range of possible animation durations
  const durationRange = maxDuration - minDuration;
  
  // Function to calculate animation duration
  const calcDuration = (baseValue, offset = 0) => minDuration + ((baseValue / 200) + offset) * durationRange;
  
  // Iterate through each class name to update its animation duration
  bgClasses.forEach((className, index) => {
    const elements = document.getElementsByClassName(className);
    if (elements.length === 0) {
      console.error(`No elements found with class name: ${className}`);
      return;
    }
    
    const offset = index * 0.05;
    const duration = calcDuration(reversedValue, offset);
    elements[0].style.animationDuration = `${duration}s`;
  });
}