- Adding animation to individual folder categories

Hi,

I'm trying to add animation to the individual categories of a menu folder.

I tried the code below and it works, but only on the entire folder.. Is it possible to animate/delay the different submenues individually?

.header-nav-item.header-nav-item--folder:hover .header-nav-folder-content {
    animation: translateX 300ms ease-in-out forwards;
  
  
}

@keyframes translateX {
  0% {
    opacity: 0;
    transform: translateX(60px);
  }
  
  80% {
    transform: translateX(-5px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

This is the original code i found:

.dropdown_menu-5
  for num in (1..5)
     .dropdown_item-{num}  
       transform-origin: top center
       animation: translateX 300ms (num * 60ms) ease-in-out forwards


@keyframes translateX {
  0% {
    opacity: 0;
    transform: translateX(60px);
  }
  
  80% {
    transform: translateX(-5px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

Hi,

What is your site url? We can help easier

Hope this is correct 🤞

https://nectarine-goby-fgp2.squarespace.com/

Pass: BM123test!

On 11/1/2022 at 8:33 PM, sckunckel said:

Hope this is correct 🤞

https://nectarine-goby-fgp2.squarespace.com/

Pass: BM123test!

Try adding this code under

div.header-nav-folder-item:hover {
    animation: translateX 300ms ease-in-out forwards;
}