slowDownAnimations.mjs

TLDR

This file exports a function called slowDownAnimations that slows down animations when a specific target element is clicked.

Methods

None

Classes

None

/**
  Slows animations
*/

const slowDownAnimations = (target) => {
  const targetEl = document.querySelector(target)
  const doc = document.documentElement

  targetEl.addEventListener('click', () => {
    const currentDuration = getComputedStyle(document.documentElement)
      .getPropertyValue('--animate-duration')
    const newDuration = currentDuration === '1s' ? '2s' : '1s'

    document.documentElement.style.setProperty('--animate-duration', newDuration);
  })
}

export default slowDownAnimations