multiple types of hover animations

Animations
2

Hi @Valeria_Gavrilyuk, welcome to the Readymag forum!

You can indeed have two step or more animations on a single project element, but these can not be independently triggered by different elements as you have proposed. Certainly something to suggest in this thread!

Alternatively, using code injection we achieved this by selecting the elements’ element data-id and using Javascript to trigger a ‘mouseover’ event. I have attached the code here as a starting point, got close to getting it to work! @neueMeta any chance you can take a look at this?

https://dev.headless.horse/multiple-triggers/

<style>
  [data-id="TARGET"] {
    background-color: yellow;
    height: 100px;
    width: 200px;
  }

  /* --------------- SPIN ANIAMTION --------------- */
  [data-id="TARGET"].animate_spin {
    animation: spin 1.5s forwards;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  

  /* --------------- SCALE ANIAMTION --------------- */
  [data-id="TARGET"].animate_scale {
    animation: scale 1.5s forwards;
  }

  @keyframes scale {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.5);
      background: red;
    }

    100% {
      transform: scale(1);
    }
  }
</style>

<script>
  // Change the elemnt id's of the values below //
  const btn_spin = document.querySelector('[data-id=""]')
  const btn_scale = document.querySelector('[data-id=""]')
  const target_element = document.querySelector('[data-id="TARGET"]')


  btn_spin.addEventListener('mouseover', () => {
    target_element.classList.add('animate_spin')

    setTimeout(() => {
      target_element.classList.remove('animate_spin')
    }, 1500)
  })


  btn_scale.addEventListener('mouseover', () => {
    target_element.classList.add('animate_scale')

    setTimeout(() => {
      target_element.classList.remove('animate_scale')
    }, 1500)
  })
</script>
2 Likes