How to animate my menu drawer inner container?

Shopify Discussion
1

Hi, I would like some help on my animation drawer. i already have the transition of the opening, but i just need the inner container opacity to fade in when it one, like this video, since it has a smooth transition:

Video

I just need to animate the menu drawer inner container to be Opacity: 0; when closed, and when open wait 400ms and be Opacity 1;

Thank you for any help.

@GemPages I would appreciate the help

2

Yes sorry I think I forgot to post it

Website & password:

St0r3P4ssw0rd

3

Hi @Fyney

1- Online STore

2- Edit Code

3- Theme files find gp-style.css

4- Put this css code into your file and save it

@media only screen and (max-width: 767px) {
.menu-drawer-container .menu-drawer__inner-container {
opacity: 0;
transition: all 4ms;
}
.menu-drawer-container.menu-opening .menu-drawer__inner-container {
opacity: 1;
}
}

Please accept if it works for you.

Thanks

4

Thank you this is what I needed

5

Thank you, Actually I was testing it after trying to do it and now ain’t working :pensive_face:

I just took my code out and still not working

6

I just did some changes and this is the new result for anyone also with the same problem:

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media only screen and (max-width: 990px) {
  .menu-drawer-container .menu-drawer__inner-container {
    opacity: 0;
    transition: all 4ms;
  }
  .menu-drawer-container.menu-opening .menu-drawer__inner-container {
    animation: fadeIn 1s ease;
    transform: opacity 1s ease !important;
    opacity: 1;
  }
}
7

works good but do know any other animation like this (fadeIn)