All things Shopify and commerce
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:
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
Solved! Go to the solution
This is an accepted solution.
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
This is an accepted solution.
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;
}
}
This is an accepted solution.
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
Thank you this is what I needed
Thank you, Actually I was testing it after trying to do it and now ain't working 😔
I just took my code out and still not working
This is an accepted solution.
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;
}
}
works good but do know any other animation like this (fadeIn)
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025