How can I add a fade-in menu animation to my mobile site?

[lefevreandco]

Hey there, i want menu animations like that rafaelindiana.com (fadein) just look on mobile.

my site: lefevreandco.com

[BSS-Commerce]

Hi @lefevreandco ,

You can edit the code in your theme to get the menu animation: You need to edit the code in the following 2 files.

+ component-menu-drawer.css file: Scroll to the bottom of the file and add the following code:
.menu-drawer__menu li {
opacity: 0;
}

+ theme.liquild file: add the following code in the same position as in the image

  <script>
            document.addEventListener("DOMContentLoaded", function() {
        const headerIcon = document.querySelector('.header__icon');

        headerIcon.addEventListener("click", function() {
          const menuDrawer = document.getElementById('menu-drawer');
          const menuItems = menuDrawer.querySelectorAll('.menu-drawer__menu li');

          if (menuDrawer.classList.contains('expanded')) {
            menuItems.forEach((menuItem, index) => {
              menuItem.style.opacity = 0;
              menuItem.style.transform = 'translateY(-20px)';
            });
            menuDrawer.classList.remove('expanded');
          } else {
            menuItems.forEach((menuItem, index) => {
              setTimeout(() => {
                menuItem.style.opacity = 1;
                menuItem.style.transform = 'translateY(0)';
              }, (index + 1) * 150);
            });
            menuDrawer.classList.add('expanded');
          }
        });
      });
    </script>

Hope it helps @lefevreandco 

[lefevreandco]

I tried it, it worked, but it wasn't what I expected. Very artificial, and doesn't have a smooth transition. Thank you btw!

[maera]

heyy, it didn't work for me. Can you help me, i want to add transition delay of 0.3s for each page in my mobile menu. 

my url: https://8ea630-08.myshopify.com/

Thanks